Adnroid Toolbar 自定义Toolbar布局

默认调用系统的toolbar,分以下几个步骤:

  1. 在布局文件中添加toolbar
  2. 描述toolbar中menu的布局
  3. 在代码中调用

主布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

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

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

</RelativeLayout>

menu布局:(android:orderInCategory表示的是展示的优先级)

<?xml version="1.0" encoding="utf-8"?>
<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:orderInCategory="80"
        android:title="edit"
        android:icon="@drawable/ab_edit"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="share"
        android:icon="@drawable/ab_share"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="hh"
        app:showAsAction="never" />
</menu>

在代码中调用:

package com.example.guo.test_toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.id_toolbar);

        // App Logo
        //toolbar.setLogo(R.mipmap.ic_launcher);
        //toolbar.setTitle("HHH");
        // Sub Title
       // toolbar.setSubtitle("hhh");
        setSupportActionBar(toolbar);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.action_share){
            finish();
            return true ;
        }
        return super.onOptionsItemSelected(item);
}

以上代码运行结果如下所示:

自定义toolbar布局:

  1. 在布局文件中加入自己要定义的布局
  2. 在代码中设置

在布局文件中加入自定义的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"

    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:id="@+id/id_toolbar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        app:navigationIcon="@mipmap/ic_launcher"
        app:title=" ">

        <TextView
            android:id="@+id/toolbar_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_marginLeft="16dp"
            android:text="num"
            android:textColor="#BFBFBF"
            android:textSize="16dp" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ab_edit"/>
        <TextView
            android:id="@+id/toolbar__"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginLeft="16dp"
            android:text="num"
            android:textColor="#BFBFBF"
            android:textSize="16dp" />

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

</RelativeLayout>

在代码中调用:

package com.example.guo.test_toolbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.id_toolbar);
        setSupportActionBar(toolbar);
        ImageView mImage=(ImageView)findViewById(R.id.mimage);
        mImage.setOnClickListener(new View.OnClickListener() {
            @Override
                public void onClick(View v) {                              
                    Toast.makeText(MainActivity.this,"hello",Toast.LENGTH_LONG).show();
            }
        });
    }
}

以上代码运行如下所示:
这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章