Android之文件actionbar自定义布局

本文链接：http://blog.csdn.net/qq_16628781/article/details/61615753

Android之文件编辑器顶部栏自定义布局

知识点：

1、仿文本编辑器顶部的操作布局；

2、新的知识名词

{

manifest的activity节点下的

1、android:parentActivityName  属性：指定父的activity是谁

2、actionBar.setDisplayOptions();//actionbar的设置

3、GridView的style样式的约束
<style name="Widget.SampleDashboard.Grid" parent="Widget">
    <item name="android:stretchMode">columnWidth</item>
    <item name="android:columnWidth">200dp</item>
    <item name="android:numColumns">auto_fit</item>
    <item name="android:drawSelectorOnTop">true</item>
    <item name="android:horizontalSpacing">0dp</item>
    <item name="android:verticalSpacing">0dp</item>
</style>

}

（这里我决定，每篇文章中遇到的“新名词”我都会记录在这里，作为自己下一步需要了解的知识；大家有兴趣的话，也可以循着这些新的专业名词，一步一步的走向Android更深的“泥潭”）

在一些编辑的APP中，我们可以看到他们的编辑页面有个很好看的布局，那就是简单的3个按钮，返回+确定+取消，这个就是很简洁的页面了。无需太多的学习成本就可以掌握。所以我们现在也来学习下这个效果怎么做。

我们这里使用到的是actionbar，但是在最新的SDK中，Google已经将actionbar弃用了，另外加了一个更加灵活的控件toolbar。有兴趣的朋友可以去看看这篇文章：

先上一个效果图

我们如何来做呢，很简单，废话不多说了，都在代码里头有注释，我就直接上代码了。

1、首先是首页的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        style="@style/Widget.SampleMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/vertical_page_margin"
        android:layout_marginLeft="@dimen/horizontal_page_margin"
        android:layout_marginRight="@dimen/horizontal_page_margin"
        android:layout_marginTop="@dimen/vertical_page_margin"
        android:text="@string/message" />

    <GridView
        android:id="@android:id/list"
        style="@style/Widget.SampleDashboard.Grid"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:paddingBottom="@dimen/vertical_page_margin"
        android:paddingLeft="@dimen/horizontal_page_margin"
        android:paddingRight="@dimen/horizontal_page_margin"
        android:scrollbarStyle="outsideOverlay" />

</LinearLayout>

很简单，就是一个textview  + GridView，他们的效果如下：

2、然后是首页的Java代码

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.TextView;

/**
 * 主页面
 */
public class MainActivity extends Activity implements AdapterView.OnItemClickListener {
    private Sample[] mSamples;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 内容提供
        mSamples = new Sample[]{
                new Sample(R.string.donebaractivity_title, R.string.donebaractivity_description,
                        DoneBarActivity.class),
                new Sample(R.string.donebuttonactivity_title, R.string.donebuttonactivity_description,
                        DoneButtonActivity.class),
                new Sample(R.string.donebuttonactivity_title2, R.string.refreshDesc,
                        RefreshActivity.class)
        };

        GridView mGridView = (GridView) findViewById(android.R.id.list);
        mGridView.setAdapter(new SampleAdapter());
        mGridView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> container, View view, int position, long id) {
        startActivity(mSamples[position].intent);
    }

    /**
     * 适配器
     */
    private class SampleAdapter extends BaseAdapter {
        @Override
        public int getCount() {
            return mSamples.length;
        }

        @Override
        public Object getItem(int position) {
            return mSamples[position];
        }

        @Override
        public long getItemId(int position) {
            return mSamples[position].hashCode();
        }

        @Override
        public View getView(int position, View convertView, ViewGroup container) {
            if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.sample_dashboard_item,
                        container, false);
            }

            ((TextView) convertView.findViewById(android.R.id.text1)).setText(
                    mSamples[position].titleResId);
            ((TextView) convertView.findViewById(android.R.id.text2)).setText(
                    mSamples[position].descriptionResId);
            return convertView;
        }
    }

    private class Sample {
        private int titleResId;
        private int descriptionResId;
        /* 启动的意图 */
        private Intent intent;

        /**
         * 构造函数
         *
         * @param titleResId       titleResId
         * @param descriptionResId descriptionResId
         * @param intent           intent
         */
        private Sample(int titleResId, int descriptionResId, Intent intent) {
            this.intent = intent;
            this.titleResId = titleResId;
            this.descriptionResId = descriptionResId;
        }

        /**
         * 构造函数
         *
         * @param titleResId       titleResId
         * @param descriptionResId descriptionResId
         * @param activityClass    activityClass
         */
        private Sample(int titleResId, int descriptionResId,
                       Class<? extends Activity> activityClass) {
            this(titleResId, descriptionResId,
                    new Intent(MainActivity.this, activityClass));
        }
    }

}

这里使用到了一个scrollview来装载更多的布局，所以你可以在这里弄一个自己想要的布局上去。我这里写了3个比较常见的布局。

还有一点要注意的，我们引入actionbar的时候，要引入

import android.app.ActionBar;这个包下的actionbar

3、然后是字符的资源文件：

<resources>
    <string name="done">确定</string>
    <string name="cancel">取消</string>
    <string name="donebaractivity_title">确定+取消按钮</string>
    <string name="donebaractivity_description">确定按钮+取消按钮desc</string>
    <string name="donebuttonactivity_title">确定按钮</string>
    <string name="donebuttonactivity_description">确定按钮desc</string>
    <string name="donebuttonactivity_title2">刷新</string>
    <string name="refreshDesc">刷新desc</string>
    <string name="message">这是一个编辑用户信息等场景，然后顶部有保存和取消的按钮样式例子！</string>
    <string name="refreshTitle">刷新</string>
    <string name="startRefresh">开始刷新</string>
</resources>

4、是DoneBarActivity.java的布局文件

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        style="@style/Widget.SampleContentContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            style="@style/Widget.SampleMessage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/donebaractivity_description" />

    </LinearLayout>
</ScrollView>

这里其实也是没什么的，注意的一点就是，千万记得activity不要写成noactionbar就可以了，在manifest文件里头。

效果图如下：

5、DoneBarActivity.java 文件

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * desc:完成和取消按钮页面
 * <p>
 * author:kuyu.yaojt (tanksu)
 * <p>
 * email:yaojt@kuyumall.com
 * <p>
 * date:17/3/12
 */

public class DoneBarActivity extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // 首先在actionbar里头加载自定义的确定和取消的布局
        final LayoutInflater inflater = (LayoutInflater) getActionBar().getThemedContext()
                .getSystemService(LAYOUT_INFLATER_SERVICE);
        final View customActionBarView = inflater.inflate(
                R.layout.actionbar_custom_view_done_cancel, null);
        customActionBarView.findViewById(R.id.actionbar_done).setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 用户点击完成按钮
                        finish();
                    }
                });
        customActionBarView.findViewById(R.id.actionbar_cancel).setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 用户点击了取消按钮
                        finish();
                    }
                });

        final ActionBar actionBar = getActionBar();
        // 设置actionbar，并且隐藏返回按钮和title
        actionBar.setDisplayOptions(
                ActionBar.DISPLAY_SHOW_CUSTOM,
                ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME
                        | ActionBar.DISPLAY_SHOW_TITLE);
        // actionbar设置自定义的布局和布局参数
        actionBar.setCustomView(customActionBarView,
                new ActionBar.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT));

        // 最后加载自己的布局
        setContentView(R.layout.activity_done_bar);
    }

}

这里我们做的工作只有两个，给actionbar设置自定义的view，然后监听自定义view里头的的控件点击事件。

效果图如下：

6、下面我再给一个刷新的页面的布局的主要代码：

actionbar的自定义布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_refresh"
        style="?android:actionBarTabTextStyle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="刷新" />
</LinearLayout>

如下图：

然后是Java主要代码：

LayoutInflater inflater = (LayoutInflater) getActionBar().getThemedContext().getSystemService(LAYOUT_INFLATER_SERVICE);

        View view = inflater.inflate(R.layout.refresh_title, null);

        view.findViewById(R.id.tv_refresh).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(RefreshActivity.this, getText(R.string.startRefresh), Toast.LENGTH_SHORT).show();
            }
        });

        ActionBar actionBar = getActionBar();
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM,
                ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME
                        | ActionBar.DISPLAY_SHOW_TITLE);
        actionBar.setCustomView(view);

这里我就不一一的将代码贴出来了，因为都是类似的，大家可以照着慢慢弄出来。

如有如何问题，请及时与我联系，谢谢！