1

操作栏和它的堆叠栏(包含导航选项卡的栏)是否可以共享相同的背景图像?一个从动作栏开始并在堆叠栏结束的?

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

我的样式.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));
4

2 回答 2

2

根据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 "";
    }
 }

}
于 2015-11-20T10:45:26.490 回答
0

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

于 2016-09-24T20:51:41.490 回答