Android之官方导航栏之Toolbar(Toolbar+DrawerLayout+ViewPager+PagerSlidingTabStrip)

by admin on 2019年9月8日

Toolbar是在 Android 5.0 开首生产的二个 Material Design 风格的导航控件
用来代表以前的 Actionbar

  通过前几篇小说,我们对Android的导航栏有了自然的刺探认识,本次小说将对Toolbar进行汇总采用,主要构成DrawerLayout、ViewPager、PagerSlidingTabStrip一同使用。

Android – Toolbar Step By Step

本身的博客:http://wuxiaolong.me/2015/11/10/toolbar/

Toolbar
设置app:layout_scrollFlags="scroll|enterAlways其一特性,增加以往,列表向上海好笑剧团动分界面title会遮蔽,向下的时候会议及展览示,那样会使页面呈现内容会多些。

Toolbar支持:

图片 1

title: Android Toolbar
date: 2015-11-10 10:18:18
tags: Toolbar
category: Android

图片 2

  • 安装导航栏图标
  • 设置App的logo
  • 帮衬设置题目和子标题
  • 协助增加多少个或多少个的自定义控件
  • 支持Action Menu

  PagerSlidingTabStrip是github上贰个开源库,地址为:


example

默许景况下Activity是有三个ActionBar的

  DrawerLayout在此以前有过介绍,在此不在过多介绍。

在Material Design之中有一个称呼为Toolbar,用来替代过去的ActionBar控件。

怎样删除那些ActionBar呢?

  先看布局文件:

主导用法

可分为三步:

首先在styles文件中自定义一个style

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jredu.MainActivity" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar" >

        <LinearLayout
            android:id="@+id/main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <com.jredu.PagerSlidingTabStrip
                android:id="@+id/tabs"
                style="@style/pagerTabStype"
                android:layout_width="match_parent"
                android:layout_height="48dip"
                android:background="@drawable/background_tabs" />

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                tools:context=".MainActivity" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/left"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#fff"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:paddingTop="30dp" >

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:src="@drawable/ic_launcher" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingLeft="20dp" >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="用户名"
                        android:textSize="18sp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="身份"
                        android:textSize="18sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

新增ToolBar样式

value/styles.xml:

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  <item name="android:textColorPrimary">@android:color/white</item>
  <!--返回或更多(app:showAsAction="never")的按钮颜色-->
  <item name="colorControlNormal">@android:color/white</item>
  <!--菜单字体颜色-->
  <item name="actionMenuTextColor">@android:color/white</item>
 </style>

看看 parent=”Theme.AppCompat.Light.NoActionBar”

 <style name="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
 </style>
 <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>

  布局文件异常的粗略,首先将全体布局划分为多个部分,上边是Toolbar,下边是DrawerLayout,在DrawerLayout里面有分为四个部分,分别是主布局和左边布局。右边布局没啥好说的,首若是主布局,在主布局里面,上边部分是PagerSlidingTabStrip,上边部分是ViewPager。

XML布局中新添ToolBar

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
 </android.support.v7.widget.Toolbar>

然后在对应Activity清单文件中布署

  布局文件实现未来,我们来看java文件,首先将Toolbar和DrawerLayout使用ActionBarDrawerToggle关联起来,代码如下:

在程序中代表ActionBar

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);

        }

res/menu/activity_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context=".MainActivity">

  <item android:id="@+id/action_edit"
        android:title="@string/action_edit"
        android:orderInCategory="80"
        android:icon="@drawable/ab_edit"
        app:showAsAction="ifRoom" />
</menu>

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {

            case R.id.action_edit:
              return true;
            case android.R.id.home:
              super.onBackPressed();//返回
              return true;
            default:
                return super.onOptionsItemSelected(item);
        }

    }
 <activity android:name=".FirstToolbarActivity" android:theme="@style/MyTheme"/>
Toolbar boolBar = (Toolbar)findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout)findViewById(R.id.drawerLayout);
        boolBar.setTitle("杰瑞教育");
        setSupportActionBar(boolBar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, boolBar,R.string.drawer_open, R.string.drawer_close);
        mDrawerToggle.syncState();
    mDrawerLayout.setDrawerListener(mDrawerToggle);

独自使用而不与ActionBar举办关联

在前一节中设置与ActionBar实行关联,纵然不进行关联也是能够利用。即实行措施:setSupportActionBar,那么Menu的操作也不用在onCreateOptionsMenu方法,直接采取ToolBar的inflateMenu方法,Menu的事件也是单独的,供给经过设置ToolBar的setOnMenuItemClickListener来完结。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

// App Logo
toolbar.setLogo(R.drawable.ic_launcher);
// Title
toolbar.setTitle("My Title");
// Sub Title
toolbar.setSubtitle("Sub title");

//setSupportActionBar(toolbar);
 toolbar.inflateMenu(R.menu.activity_main);
// Navigation Icon 要設定在 setSupoortActionBar后 才有作用
// 否則會出現 back button 
toolbar.setNavigationIcon(R.drawable.ab_android);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

            }
        });
// Menu item click 设定在 setSupportActionBar 之后才有作用
toolbar.setOnMenuItemClickListener(onMenuItemClick);

onMenuItemClick

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
  @Override
  public boolean onMenuItemClick(MenuItem menuItem) {
    String msg = "";
    switch (menuItem.getItemId()) {
      case R.id.action_edit:  
        break;
    }
    return true;
  }
};

率先种样式

布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" app:navigationIcon="@mipmap/ic_book_list" app:titleTextColor="@color/white" app:theme="@style/CustomToolbarTheme"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center" android:text="标题" android:textColor="@android:color/white" android:textSize="16sp"/> </android.support.v7.widget.Toolbar></RelativeLayout>

FirstToolbarActivity.java

package com.zhoujian.toolbar;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;/** * Created by zhoujian on 2017/3/8. */public class FirstToolbarActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_first); initView(); } private void initView() { Toolbar toolbar =  findViewById(R.id.tool_bar); // 设置navigation button 点击事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick { finish; //设置menu toolbar.inflateMenu(R.menu.menu_item); // 设置溢出菜单的图标 toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu)); // 设置menu item 点击事件 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId{ case R.id.item_collect: //点击设置 Toast.makeText(FirstToolbarActivity.this, "按钮被点击了", Toast.LENGTH_SHORT).show(); break; case R.id.item_talk: //点击设置 Toast.makeText(FirstToolbarActivity.this, "发起群聊点击了", Toast.LENGTH_SHORT).show(); break; case R.id.item_add: //点击设置 Toast.makeText(FirstToolbarActivity.this, "添加朋友被点击了", Toast.LENGTH_SHORT).show(); break; } return false; } }); }}

来得效果:

图片 3a.png

  然后看看哪些构成PagerSlidingTabStrip和ViewPager,PagerSlidingTabStrip不会细小略,大家只要求将Curry的java文件和所急需的attr文件拷到大家的类型里面就可以。

自定义布局

title修改为居中

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@mipmap/bg_title"
    android:minHeight="?actionBarSize">

    <TextView
        android:id="@+id/toolbar_title"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>

剥夺系统的title显示,即setDisplayShowTitleEnabled方法

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
  TextView  mTitleView = (TextView) toolbar.findViewById(R.id.toolbar_title);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
             actionBar.setDisplayShowTitleEnabled(false);
        }
  mTitleView.setText("");

第二种体裁

布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:toolbar="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" toolbar:logo="@mipmap/ic_launcher" toolbar:navigationIcon="@mipmap/ic_book_list" toolbar:subtitle="小标题" toolbar:theme="@style/CustomToolbarTheme" toolbar:title="大标题" toolbar:titleMarginStart="20dp" toolbar:titleTextColor="@color/white"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="50dp" android:text="我的" android:textColor="@color/white" android:textSize="14sp"/> </android.support.v7.widget.Toolbar> </RelativeLayout>

SecondToolbarActivity.java

package com.zhoujian.toolbar;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;/** * Created by zhoujian on 2017/3/8. */public class SecondToolbarActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); initView(); } private void initView() { Toolbar toolbar =  findViewById(R.id.tool_bar); // 设置navigation button 点击事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick { finish; //设置menu toolbar.inflateMenu(R.menu.menu_item); // 设置溢出菜单的图标 toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu)); // 设置menu item 点击事件 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId{ case R.id.item_collect: //点击设置 Toast.makeText(SecondToolbarActivity.this, "按钮被点击了", Toast.LENGTH_SHORT).show(); break; case R.id.item_talk: //点击设置 Toast.makeText(SecondToolbarActivity.this, "发起群聊点击了", Toast.LENGTH_SHORT).show(); break; case R.id.item_add: //点击设置 Toast.makeText(SecondToolbarActivity.this, "添加朋友被点击了", Toast.LENGTH_SHORT).show(); break; } return false; } }); }}

展现效果:

图片 4b.png

        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pager = (ViewPager) findViewById(R.id.pager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
    tabs.setViewPager(pager);

落到实处将布局的从头到尾的经过延伸到状态栏

style

 <item name="android:windowTranslucentStatus" tools:targetApi="19">true</item>

Toolbar扩展三个paddingTop:

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@mipmap/bg_title"
    android:minHeight="?actionBarSize"
    android:paddingTop="@dimen/status_bar_height"/>

values/dimens.xml

<dimen name="status_bar_height">0dp</dimen>

values-v19/dimens.xml

<dimen name="status_bar_height">25dp</dimen>

values-v23/dimens.xml

<dimen name="status_bar_height">24dp</dimen>

能够因而以下情势获得StatusBarHeight:

public int getStatusBarHeight() {
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

另外注意:toolbar所在的父布局不可能同期设置fitsSystemWindow=”true”,它会使得显示屏上的可布局空间位于状态栏下方与导航栏上方。

因为那些带来了键盘挡住EditText的主题素材,建设方案:
在EditText所在的父布局设置fitsSystemWindow=”true”就能够。

其三种体制

布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:toolbar="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" toolbar:title="使用实例" toolbar:navigationIcon="@mipmap/ic_book_list" toolbar:titleTextColor="@color/white" toolbar:theme="@style/CustomToolbarTheme"> </android.support.v7.widget.Toolbar></RelativeLayout>

ThirdToolbarActivity.java

package com.zhoujian.toolbar;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;/** * Created by zhoujian on 2017/3/8. */public class ThirdToolbarActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_third); initView(); } private void initView() { Toolbar toolbar =  findViewById(R.id.tool_bar); // 设置navigation button 点击事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick { finish; //设置 Toolbar menu toolbar.inflateMenu(R.menu.toolbar_menu); // 设置溢出菜单的图标 toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu)); // 设置menu item 点击事件 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId{ case R.id.publish: //点击设置 Toast.makeText(ThirdToolbarActivity.this, "发布按钮被点击了", Toast.LENGTH_SHORT).show(); break; } return false; } }); }}

呈现效果:

图片 5c.png

  通过PagerSlidingTabStrip的setViewPager方法就能够将四个零部件关联起来。可是要想达成如上作用,还必得编写制定样式,具体如下:

微信徒人号

本身的微信公众号:吴小龙同学
不断于技能分享,不捧场外人,写给懂的人看~
款待微信扫一扫关心

图片 6

第多种样式

布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:andro xmlns:toolbar="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android: android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" toolbar:navigationIcon="@mipmap/ic_book_list" toolbar:theme="@style/CustomToolbarTheme" toolbar:titleTextColor="@color/white"> <EditText android: android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="@color/white"/> </android.support.v7.widget.Toolbar></RelativeLayout>

FourthToolbarActivity.java

package com.zhoujian.toolbar;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;/** * Created by zhoujian on 2017/3/8. */public class FourthToolbarActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_four); initView(); } private void initView() { Toolbar toolbar =  findViewById(R.id.tool_bar); // 设置navigation button点击事件 toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick { finish; //设置menu toolbar.inflateMenu(R.menu.menu_search); // 设置溢出菜单的图标 toolbar.setOverflowIcon(getResources().getDrawable(R.mipmap.icon_menu)); // 设置menu item 点击事件 toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId{ case R.id.item_search: //点击设置 Toast.makeText(FourthToolbarActivity.this, "搜索按钮被点击了", Toast.LENGTH_SHORT).show(); break; } return false; } }); }}

来得效果:

图片 7d.png

源码下载:

    <style name="AppTheme" parent="AppBaseTheme">
        <item name="colorPrimary">#1570A6</item>
        <item name="actionBarSize">50dp</item>
        <item name="windowActionBar">false</item>
        <item name="titleTextAppearance">@style/CustomTitleTextAppearance</item>
    </style>

    <style name="CustomTitleTextAppearance">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">20sp</item>
    </style>
    <!-- PagerSlidingTabStrip的自定义样式 -->
    <style name="pagerTabStype">
        <item name="pstsShouldExpand">true</item>
        <item name="pstsDividerColor">#00000000</item>
        <item name="pstsUnderlineHeight">1dp</item>
        <item name="pstsIndicatorHeight">3dp</item>
        <item name="pstsIndicatorColor">#1570A6</item>
</style>

有关小编

点击查阅

  要求验证的的PagerSlidingTabStrip未有提供选中tab字体颜色的主意,在那边可自动修改源码实现。

附录

Android ToolBar Widget
Usage
ANDROID – TOOLBAR STEP BY
STEP

 

  想要理解越多内容的同伙,可以点击查看源码,亲自运维测量试验。

  疑问咨询或本事交换,请步入官方QQ群:图片 8 (452379712)

 

作者:杰里教育
出处:http://www.cnblogs.com/jerehedu/ 
本文版权归济南杰里教育科学和技术有限集团和微博共有,接待转发,但未经小编同意必需保留此段注解,且在文章页面显明地点给出原作连接,不然保留追究法律义务的义务。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图