如何使 ActionBar 和堆叠条共享相同的背景图像

Question

操作栏和堆叠栏（包含导航选项卡的栏）是否可以共享相同的背景图像？从操作栏开始到堆叠栏结束？

目前实现这一点的方式，最终拥有带有自己图像的操作栏和带有自己的堆叠栏。

我的样式.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionMenuTextColor">@color/app_yellow</item>
    <item name="android:windowActionBarOverlay">true</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
    <item name="actionMenuTextColor">@color/app_yellow</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">

    <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

    <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

    <item name ="android:actionBarTabStyle">@style/MyTabStyle</item>

    <item name="background">@drawable/actionbar</item>

</style>

 <!-- individual ActionBar tabs style -->
<style name="MyTabStyle" parent ="Widget.AppCompat.Light.ActionBar.TabView">
    <item name ="background">@android:color/transparent</item>
    <item name ="android:background">@android:color/transparent</item>

</style>

在我的活动中

  @Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

   ActionBar actionBar = getSupportActionBar();
    // Specify that tabs should be displayed in the action bar.
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    actionBar.setLogo(R.mipmap.ic_launcher);
    actionBar.setDisplayUseLogoEnabled(true);
    actionBar.setDisplayShowHomeEnabled(true);
    actionBar.setStackedBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar));

Answer 1

根据 Michael De Soto 的指导（见他上面的评论），我能够使用具有

的工具栏让操作栏和堆叠栏共享相同的背景图像

• 视图中的操作栏详细信息（例如图标、标题）（标题的文本视图、图标的图像视图等）

• 标签布局中的堆叠条形详细信息（基本上是标签）。

我是如何实现的

我的活动 xml

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:id="@+id/mainActivityBar"
    android:layout_alignParentTop="true"
    android:background="@drawable/actionbar"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetEnd="0dp"
    app:contentInsetRight="0dp"
  >
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="President"
            android:id="@+id/appname_1"
            android:background="@android:color/transparent"
            android:textColor="#ffffff"
            android:layout_marginLeft="20dp" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            style="@style/myCustomTabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:layout_below="@+id/appname_1"
            android:layout_alignParentEnd="true"
            android:layout_alignParentStart="false"
            android:layout_alignParentLeft="false"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="false"
            android:layout_alignLeft="@+id/appname_1"
            app:tabGravity="fill"
            app:tabMode="scrollable"/>
    </RelativeLayout>

</android.support.v7.widget.Toolbar>

在我的 styles.xml 中添加了以下内容

<style name="mainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="android:windowActionBar">false</item>

</style>

<style name="myCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

最后，我的活动

public class MainActivity extends AppCompatActivity {

private SectionsPagerAdapter mSectionsPagerAdapter;

TabLayout tabLayout;

private ViewPager mViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);
    Toolbar toolbar =(Toolbar) findViewById(R.id.mainActivityBar);
     setSupportActionBar(toolbar);

    tabLayout = (TabLayout) findViewById(R.id.tabs);

    // Create the adapter that will return a fragment for each of the three
    // primary sections of the activity.
    mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

    // Set up the ViewPager with the sections adapter.
     mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mSectionsPagerAdapter);
    mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

    tabLayout.setupWithViewPager(mViewPager);
}

public class SectionsPagerAdapter extends FragmentStatePagerAdapter {

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        switch (position) {
            case 0:
              return Item1fragment.newInstance();
            case 1:

                return Item2fragment.newInstance();
            case 2:
                return Item3fragment.newInstance();

        }
        return null;
    }

    @Override
    public int getCount() {
        // Show 3 total pages.
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
            case 0:
                return "Item1;
            case 1:
              return "Item2";
            case 2:
               return "Item3";
        }
        return "";
    }
 }

}

Answer 2

感谢您的深入回答 OP。对于以后来这里的人来说，如果你想在工具栏上显示后退按钮，它会将Toolbar中的所有后续视图推到一边大约50dp，即使在下面对齐时，即使使用app:contentInsetStart="0dp"也是如此。正因为如此，我才选择了透明背景并在它们背后有一个视图。