本⽂出⾃:【张鸿洋的博客】
ps：本博客使⽤：
compileSdkVersion 22
buildToolsVersion “22.0.1”
compile ‘com.android.support:appcompat-v7:22.1.1’
忽然发现ActionBarActivity被弃⽤了，推荐使⽤AppCompatActivity，相关blog地址：Android Support Library 22.1
metarial design的theme允许我们去设置status bar的颜⾊，如果你项⽬的最⼩⽀持版本为5.0，那么你可以使⽤android:Theme.Material，设置android:statusBarColor。当然了这种情况⽬前来说⽐较少，所以我们多数使⽤
l
可以看到：colorAccent 也就是图中的粉⾊，EditText 正在输⼊时，RadioButton 选中时的颜⾊。ps:5.0以下设备，状态栏颜⾊不会变化。
3、ToolBar 的使⽤
众所周知，在使⽤ActionBar 的时候，⼀堆的问题：这个⽂字能不能定制，位置能不能改变，图标的间距怎么控制神马的，由此暴露出了ActionBar 设计的不灵活。为此官⽅提供了ToolBar ，并且提供了supprot library ⽤
（1）ToolBar 的引⼊
既然准备⽤ToolBar ，⾸先看看如何将其引⼊到app 中。
1）隐藏原本的ActionBar
隐藏可以通过修改我们继承的主题为：Theme.AppCompat.Light.NoActionBar ，当然也可以通过设置以下属性完成：
我们这⾥选择前者：
2）在布局⽂件中声明
<style name="AppTheme" parent="AppBaseTheme">        <item name="android:statusBarColor">@color/material_blue_700</item>    </style></resources>
2
3<?xml version="1.0" encoding="utf-8"?><resources>
<color name="material_blue_500">#009688</color>
<color name="material_blue_700">#00796B</color>
<color name="material_green_A200">#FD87A9</color></resources>12
3
<item name="windowActionBar">false</item><item name="android:windowNoTitle">true</item>1
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- customize the color palette -->
<item name="colorPrimary">@color/material_blue_500</item>
<item name="colorPrimaryDark">@color/material_blue_700</item>
<item name="colorAccent">@color/material_green_A200</item>    </style>12
3
<LinearLayout xmlns:android="schemas.android/apk/res/android"    android:layout_width="match_parent"    android:orientation="vertical"    android:layout_height="match_parent"    xmlns:app="schemas.android/apk/res-auto">    <android.support.v7.widget.Toolbar        android:id="@+id/id_toolbar"        android:layout_height="wrap_content"        android:layout_width="match_parent" />    <android.support.v7.widget.GridLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        app:useDefaultMargins="true"        app:columnCount="3">        <TextView            android:text="First Name:"            app:layout_gravity="right" />        <EditText            android:ems="10"            app:layout_columnSpan="2" />        <TextView            android:text="Last Name:"            app:layout_column="0"            app:layout_gravity="right" />        <EditText            android:ems="10"            app:layout_columnSpan="2" />        <TextView            android:text="Visit Type:"            app:layout_column="0"            app:layout_gravity="right" />        <RadioGroup app:layout_columnSpan="2">            <RadioButton                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Business" />            <RadioButt
on                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="Social" />        </RadioGroup>        <Button            android:text="Ok"
app:layout_column="1" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
ok ，这⾥我们也贴出来上⾯图⽚的效果的xml ，使⽤GridLayout 实现的，有兴趣的可以研究下。可以看到我们在布局⽂件中定义了ToolBar 。
3）代码中设定
ok，基本就是先隐藏ActionBar ，然后在布局⽂件中声明，最后代码中设定⼀下。现在看⼀下效果图：
可以看到我们的ToolBar 显⽰出来了，默认的Title 为ToolBar ，但是这个样式实在是不敢恭维，下⾯看我们如何定制它。
（2）定制ToolBar
⾸先给它⼀个nice 的背景⾊，还记得前⾯的colorPrimary 么，⽤于控制ActionBar 的背景⾊的。当然这⾥我们的ToolBar 就是⼀个普通的ViewGroup 在布局中，所以我们直接使⽤background 就好，值可以为：ToolBar 中包含Nav Icon , Logo , Title , Sub Title , Menu Items 。
我们可以通过代码设置上述ToolBar 中的控件：
可选⽅案当然如果你喜欢，也可以在布局⽂件中去设置部分属性：
⾄于Menu Item ，依然⽀持在menu/l 去声明，然后复写onCreateOptionsMenu 和onOptionsItemSelected 即可。
可选⽅案也可以通过toolbar.setOnMenuItemClickListener 实现点击MenuItem 的回调。
效果图：
关于字体的样式，可以在布局⽂件设置属性app:titleTextAppearance 、app:subtitleTextAppearance 或者代码setTitleTextAppearance 、setSubTitleTextAppearance 设置。
4、实战
简单介绍了Toolbar 以后呢，我们决定做点有意思的事，整合ToolBar ，DrawerLayout ，ActionBarDrawerToggle 写个实⽤的例⼦，效果图如下：
app:layout_column="1" />        <Button            android:text="Cancel"            app:layout_column="2" />    </android.support.v7.widget.GridLayout></LinearLayout>
31
32
33
34public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        Create(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);        setSupportActionBar(toolbar);
}
1
2
3
4
5@Override    protected void onCreate(Bundle savedInstanceState) {        Create(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.id_toolbar);        // App Logo        toolbar.setLogo(R.mipmap.ic_l
auncher);        // Title        toolbar.setTitle("App Title");        // Sub Title        toolbar.setSubtitle("Sub title");        setSupportActionBar(toolbar);        //Navigation Icon        toolbar.setNavigationIcon(R.drawable.ic_toc_white_24dp);    }1
2
3
4
5
6
7
<android.support.v7.widget.Toolbar        android:id="@+id/id_toolbar"
app:title="App Title"
app:subtitle="Sub Title"
app:navigationIcon="@drawable/ic_toc_white_24dp"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"/>12345
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override
public boolean onMenuItemClick(MenuItem item) {                return false;
}
});12
3
ok ，简单处理了下横纵屏幕的切换。接下来看代码实现。
width的意思中文翻译⼤致思路
整体实现还是⽐较容易的，⾸先需要引⼊DrawerLayout （如果你对DrawerLayout 不了解，可以参考
Android DrawerLayout ⾼仿QQ5.2双向侧滑菜单)，然后去初始化mActionBarDrawerToggle ，mActionBarDrawerToggle 实际上是个DrawerListener ，设置mDrawerLayout.setDrawerListener(mActionBarDrawerToggle)；就已经能够实现我们的效果图，左侧菜单为Fragment ，内容区域为Fragment ，点击左侧菜单切换内容区域的Fragment 即可。关于Fragment 的知识，可以查看：Android Fragment 你应该知道的⼀切布局⽂件
l
DrawerLayout 中包含两个FrameLayout ，分别放内容区域和左侧菜单的Fragment 。
LeftMenuFragment
<LinearLayout xmlns:android="schemas.android/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:background="#ffffffff"
xmlns:app="schemas.android/apk/res-auto">
<!--app:subtitle="Sub Title"-->
<android.support.v7.widget.Toolbar        android:id="@+id/id_toolbar"
app:title="App Title"
app:navigationIcon="@drawable/ic_toc_white_24dp"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary" />
<android.support.v4.widget.DrawerLayout        android:id="@+id/id_drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout            android:id="@+id/id_content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<FrameLayout            android:id="@+id/id_left_menu_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffffff"></FrameLayout>    </android.support.v4.widget.DrawerLayout></LinearLayout>
1234567891011121314151617
18
19package lbar;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.ListFragment;import android.view.LayoutInflater;import android.view.Vie  * Created by zhy on 15/4/26. */public class LeftMenuFragment extends ListFragment {    private static final int SIZE_MENU_ITEM = 3;    private MenuItem[] mItems = new MenuItem[SIZE_MENU_ITEM];    private LeftMenuAdapter mAdapter;    private LayoutInflater mInflater;    @Override    public void onCreate(@Nullable Bundle savedInstanceState) {        Create(savedInstanceState);        mInflater = LayoutInflater.from(getActivity());        MenuItem menuItem = null;        for (int i = 0; i < SIZE_MENU_ITEM; i++) {            menuItem = new MenuItem(getResources().getStringArray(R.array.array_left_menu)[i], false, R.drawable.music_36px, R.drawable.music_36px_light);            mItems[i] = menuItem;        }    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        CreateView(inflater, container, savedInstanceState);    }    @Override    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {        ViewCreated(view,
savedInstanceState);        setListAdapter(mAdapter = new LeftMenuAdapter(getActivity(), mItems));    }    @Override    public void onListItemClick(ListView l, View v, int position, long id) {        ListItemClick(l, v, position, id);        if (mMenuItemSelectedListener != null) {
1
2
3
4
5
6
7
8
9
10
11
12
13
继承⾃ListFragment ，主要⽤于展⽰各个Item ，提供了⼀个选择Item 的回调，这个需要在Activity 中去注册处理。LeftMenuAdapter
Adapter 没撒说的~~提供了⼀个setSection ⽅法⽤于设置选中Item 的样式什么的。
接下来看ContentFragment ，仅仅只是⼀个TextView ⽽已，所以代码也⽐较easy 。            uItemSelected(((MenuItem) getListAdapter().getItem(position)).text);        }        mAdapter.setSelected(position);    }    //选择回调
的接⼝    public interface OnMenuItemSelectedListener {        void menuItemSelected(String title);    }    private OnMenuItemSelectedListener mMenuItemSelectedListener;    public void setOnMenuItemSelectedListener(OnMenuItemSelectedListener menuItemSelectedListener) {        this.mMenuItemSelec    }}
14
15
16
17
18
19
20
21package lbar;t.Context;aphics.Color;import and
roid.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.w  * Created by zhy on 15/4/26. */public class LeftMenuAdapter extends ArrayAdapter<MenuItem> {    private LayoutInflater mInflater;    private int mSelected;    public LeftMenuAdapter(Context context, MenuItem[] objects) {        super(context, -1, objects);        mInflater = LayoutInflater.from(context);    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        if (convertView == null) {            convertView = mInflater.inflate(R.layout.item_left_menu, parent, false);        }        ImageView iv = (ImageView) convertView.findViewById(R.id.id_item_icon);        TextView title = (TextView) convertView.findViewById(R.id.id_item_title);        title.setText(getItem(position).text);        iv.setImageResource(getItem(position).icon);        convertView.setBackgroundColor(Color.TRANSPARENT);        if (position == mSelected) {            iv.setImageResource(getItem(position).iconSelected);            convertView.setBackgroundColor(getContext().getResources().lor.state_menu_item_selected));        }        return convertView;    }    public void setSelected(int position) {        this.mSelected = position;        notifyDataSetChanged();    }}package lbar;public class MenuItem {    public MenuItem(String text, boolean isSelected, int icon, int iconSelected) {        = text;        this.isSelected = isSelected;        this.icon = icon;        this.iconSelected = iconSelected;    }    boolean isSelected;    String text;    int icon;    int iconSelected;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。