Android之文件actionbar自定义布局

xiaoxiao2021-03-25 73

本文链接：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、首先是首页的布局

很简单，就是一个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);

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

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

转载请注明原文地址: https://ju.6miu.com/read-32752.html

技术

最新回复(0)