Android之ActionBar常用设计和使用总结
常用ActionBar总结
我们经常看见项目的顶部有一些文字显示在中间，或者左边、右边，而且还有一个返回的图标，很方便我们返回，接下来我总结下常用的ActionBar
第一步:写常见的ActionBar的布局文件
我这里写了3个actionbar文件
1、actionbar_return.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/rl_body"
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="@drawable/actionbar_bg"
android:gravity="center_vertical" >
<TextView
android:id="@+id/action_bar_text"
android:text="@string/app_name"
android:layout_centerVertical="true"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/color_33"
android:textSize="20dp"
/>
<RelativeLayout
android:id="@+id/rl_return"
android:layout_width="50dp"
android:layout_height="41.5dp"
android:baselineAligned="false"
android:clickable="true"
android:layout_centerVertical="true"
android:onClick="handleActionBarClick"
android:orientation="horizontal"
android:gravity="center_vertical"
android:background="@drawable/actionbar_return_bg_selector">
<ImageView
android:id="@+id/iv_return_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="@drawable/actionbar_icon_back" />
</RelativeLayout>
</RelativeLayout> 这个布局左边有一个返回键的图标，然后文字放在中间，如下图
这个时候
android:onClick="handleActionBarClick"我们需要实现这个方法，一般写在baseActivity.java里面
public void handleActionBarClick(View v) {
switch (v.getId()) {
default:
this.finish();
break;
}
}
2、actionbarmarket.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/actionbar_height"
android:background="@drawable/actionbar_bg"
android:gravity="center_vertical">
<RelativeLayout
android:id="@+id/rl_plan_goods"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:baselineAligned="false"
android:clickable="true"
android:onClick="handleActionBarClick"
android:orientation="horizontal">
<TextView
android:id="@+id/action_bar_text"
style="@style/actionbar_title_text_style_clickable"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/gap_actionbar_market_text"
android:layout_marginStart="@dimen/gap_actionbar_market_text"
android:paddingEnd="@dimen/main_radiogroup_margin_top"
android:paddingLeft="@dimen/main_radiogroup_margin_top"
android:paddingRight="@dimen/main_radiogroup_margin_top"
android:text="@string/market_plan" />
<ImageView
android:id="@+id/iv_arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="@dimen/gap_actionbar_market_text"
android:layout_marginRight="@dimen/gap_actionbar_market_text"
android:layout_toEndOf="@+id/action_bar_text"
android:layout_toRightOf="@+id/action_bar_text"
android:contentDescription="@string/app_name"
android:src="@drawable/icon_down" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/rl_locate"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:baselineAligned="false"
android:clickable="true"
android:onClick="handleActionBarClick"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_locate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/gap_actionbar_market_text"
android:layout_marginStart="4dp"
android:contentDescription="@string/app_name"
android:src="@drawable/icon_coordinate" />
<TextView
android:id="@+id/tv_locate"
style="@style/actionbar_title_text_style_clickable"
android:layout_centerVertical="true"
android:layout_marginLeft="1dp"
android:layout_marginStart="1dp"
android:layout_toEndOf="@+id/iv_locate"
android:layout_toRightOf="@+id/iv_locate"
android:ellipsize="start"
android:maxEms="7"
android:singleLine="true"
android:text="@string/general_city"
android:textColor="@color/color_8f"
android:textSize="13sp" />
</RelativeLayout>
</RelativeLayout>效果图如下：
3、actionnormal.xml文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/id_title"
android:layout_width="match_parent"
android:layout_height="@dimen/actionbar_height"
android:background="@drawable/actionbar_bg"
android:gravity="center_vertical" >
<TextView
android:id="@+id/action_bar_text"
style="@style/actionbar_title_text_style"
android:layout_centerInParent="true" />
</RelativeLayout>
效果图如下：
第二步：封装我们的ActionbarUtil.java文件
代码如下：package com.kuyu.kuxianghui.util;
import android.app.ActionBar;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import com.kuyu.kuxianghui.R;
public class ActionbarUtil {
//custom actionbar type id define
public static final int ACTIONBAR_RETURN = 0;
public static final int ACTIONBAR_MARKET = 1;
public static final int ACTIONBAR_NORMAL = 2;
public static void makeCustomActionBar(Context context,
ActionBar actionBar, String title, int actionbartype) {
actionBar.setDisplayHomeAsUpEnabled(true);
View view = null;
LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
switch (actionbartype) {
case ACTIONBAR_RETURN:
view = mInflater.inflate(R.layout.actionbar_return, null);
break;
case ACTIONBAR_MARKET:
view = mInflater.inflate(R.layout.actionbar_market, null);
break;
case ACTIONBAR_NORMAL:
view = mInflater.inflate(R.layout.actionbar_normal, null);
break;
default:
view = mInflater.inflate(R.layout.actionbar_normal, null);
break;
}
TextView textView0 = (TextView) view.findViewById(R.id.action_bar_text);
if(textView0!=null){
textView0.setText(title);
// textView0.setSelected(true);
}
actionBar.setCustomView(view, new ActionBar.LayoutParams(
ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.MATCH_PARENT));
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
}
第三步：我们怎么使用
比如我们用第一个有返回图标的ActionBar,我们在这个Activity里面的onCreate()方法里面写入下面代码就行，其它的ActionBar用法类似
ActionBar bar=getActionBar();
//bar.setTitle(title);
//bar.setDisplayHomeAsUpEnabled(true);
//bar.setDisplayShowHomeEnabled(true);
ActionbarUtil.makeCustomActionBar(this, bar, title, ActionbarUtil.ACTIONBAR_RETURN);
按下那个图片就可以返回，好了，so easy