Matrial Design（五） toolbar（1）

来源：互联网发布：linux 解压tar.gz 编辑：程序博客网时间：2024/06/13 21:50

toolbar是android5.0推出的，如果minSDKVersion低于21，那么就需要再gradle里依赖v7包（v11包包含了v7包）。

只有继承之AppCompatActivity（实现了ActionBarDrawerToggle.DelegateProvider接口）的activity才能使用toolbar。该activity的主题也需要设置为NoActionBar（通常把application设置为NoActionBar），是为了方便用toolbar代替actionbar。

AndroidManifest.xml<application        android:allowBackup="true"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/AppTheme.NoActionBar">        <activity android:name=".MainActivity">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>

style.xml<style name="AppTheme.NoActionBar">        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>

在activity中需要先调用setSupportActionBar()方法，然后就能调用toolbar的相关方法。通常我们会通过setTitle()方法设置标题（前提是先设置了getSupportActionBar().setDisplayShowTitleEnabled(false)），通过getSupportActionBar().setDisplayHomeAsUpEnabled(true)方法设置返回按钮，通过重写onCreateOptionsMenu()方法设置右侧的菜单以及通过inflateMenu()方法来增加菜单（此方法在整个页面第一次加载时并不管用）。还可以通过setNavigationIcon()方法设置左侧的按钮（返回按钮位置），通过setNavigationOnClickListener()方法对该按钮进行监听。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    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:id="@+id/tb_activity_main"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="?attr/colorPrimary"        app:theme="@style/AppTheme.AppBarOverlay">    </android.support.v7.widget.Toolbar>    <android.support.v4.view.ViewPager        android:id="@+id/vp_main"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout> public class MainActivity extends AppCompatActivity {    private Toolbar tbActivityMain;    private ViewPager vpMain;    private List<View> viewList;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        tbActivityMain = findViewById(R.id.tb_activity_main);        vpMain = findViewById(R.id.vp_main);        LayoutInflater inflater=getLayoutInflater();        View view1 = inflater.inflate(R.layout.pager1, null);        View view2 = inflater.inflate(R.layout.pager2,null);        // 将要分页显示的View装入数组中        viewList = new ArrayList<View>();        viewList.add(view1);        viewList.add(view2);        setSupportActionBar(tbActivityMain);        getSupportActionBar().setDisplayShowTitleEnabled(false);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        tbActivityMain.setTitle("标题");        tbActivityMain.setNavigationIcon(R.mipmap.search);        tbActivityMain.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                finish();            }        });        vpMain.setAdapter(new PagerAdapter() {            @Override            public int getCount() {                return viewList.size();            }            @Override            public boolean isViewFromObject(View view, Object object) {                return view==object;            }            @Override            public void destroyItem(ViewGroup container, int position,                                    Object object) {                container.removeView(viewList.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                container.addView(viewList.get(position));                return viewList.get(position);            }        });        vpMain.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                switch (position){                    case 0:                        break;                    case 1:                        tbActivityMain.getMenu().clear();                        tbActivityMain.inflateMenu(R.menu.menu_search2);                        break;                }            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.menu_search1,menu);        return super.onCreateOptionsMenu(menu);    }}

上面代码效果图

toolbar本身是一个layout，所以我们可以在toolbar中绘制tablayout，或者搜索框一类的。如果在布局的toolbar根布局下放置控件，那么使用方法设置标题并不会显示。而且toolbar下可放置控件的范围并不是整个标题栏，而是排除了左侧按钮和右侧菜单的范围。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    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:id="@+id/tb_activity_main"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="#0f0"        app:theme="@style/AppTheme.AppBarOverlay">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="#0ff">        </RelativeLayout>    </android.support.v7.widget.Toolbar>    <android.support.v4.view.ViewPager        android:id="@+id/vp_main"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout>

布局文件改成如上，效果变成如下：

这时如果需要设置标题，可以在toolbar里面放置一个textview作为标题。

除了在toolbar根布局下放置控件来丰富我们的标题栏，还可以自定义toolbar，MyToolBar继承ToolBar方法，然后在其构造方法中inflate一个布局。但是还是有一些问题，方法设置标题仍然不显示，仍然需要你在自定义类的布局文件中放置一个textview作为标题。还有一个更为严重的问题，toolbar左边按钮和右边的菜单图标莫名向上偏移了。

public class MyToolbar extends Toolbar {    private LayoutInflater mInflater;    private TextView mTvTabToolbarTitle;    private View mView;    public MyToolbar(Context context) {        this(context, null);    }    public MyToolbar(Context context, @Nullable AttributeSet attrs) {        this(context, attrs, 0);    }    public MyToolbar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initView();        if (attrs != null) {            TypedArray a = context.obtainStyledAttributes( attrs,                    R.styleable.MyToolbar, defStyleAttr, 0);            String title = a.getString(R.styleable.MyToolbar_title);            mTvTabToolbarTitle.setText(title);            a.recycle();        }    }    private void initView() {        if (mView == null) {            mInflater = LayoutInflater.from(getContext());            mView = mInflater.inflate(R.layout.mytoolbar, null);            mTvTabToolbarTitle = (TextView) mView.findViewById(R.id.tv_toolbar_title);            LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);            addView(mView, lp);        }    }    public void setTitle(String title){        mTvTabToolbarTitle.setText(title);    }}

res/values/attrs.xml文件<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="MyToolbar">        <attr name="title" format="string"/>    </declare-styleable></resources>

布局修改为<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <com.example.a1qu212.toolbarapplication.view.MyToolbar        android:id="@+id/tb_activity_main"        android:layout_width="match_parent"        android:layout_height="?attr/actionBarSize"        android:background="#0f0"        app:title="mytoolbar的标题"        app:theme="@style/AppTheme.AppBarOverlay">        <RelativeLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:background="#0ff">        </RelativeLayout>    </com.example.a1qu212.toolbarapplication.view.MyToolbar>    <android.support.v4.view.ViewPager        android:id="@+id/vp_main"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout>

然后效果图就变成这样了

阅读全文

0 0