android studio Activity标题栏研究
第一次研究时间:2016/7/30,以下研究主要存在于当前最新版本的android studio上。eclipse请参考
一、头部标题取消
当前版本新建工程在 application中默认主题为 android:theme="@style/AppTheme" ,存在于res/values/styles.xml中代码,此为默认创建时不同版本可能不一样
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
取消标题方式:
1、全部取消主题,android:theme=""输入@style/No查询,这边出现以下三个,选哪个都可以就是样式不同,等做的时候不行再换
android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"
android:theme="@style/Theme.AppCompat.NoActionBar"
2、单个取消主题,就是在<activity 便签中同样存在android:theme="",里面的值同上
在代码中取消标题,在android studio中使用,eclipse看下方代码:
//请将以下代码写在 setContentView() 前面 supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
也可以自己写style进行引用
<style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style>
在eclipse中使用这个
requestWindowFeature(Window.FEATURE_NO_TITLE);
附带取消头部状态栏代码,状态栏为最上面的小黑条,显示着时间,电量什么的,手指按住可以下拉,eclipse下同
//同样写在setContentView()之上 this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
而网上使用以下标签来同时消除标题跟状态栏只有在文件 extends Activity时是有用的,在继承AppCompatActivity或者ActionBarActivity闪退,最近试了一下最新的版本使用上述方法取消状态栏可行(2017.1.13),不行的话请看原因请看链接
http://www.eoeandroid.com/thread-559545-1-1.html?_dsign=51bbc2e6
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
二、标题栏设计
1.标题栏样式设计看图说话:http://blog.sina.com.cn/s/blog_6e334dc70102ve7d.html
首先我们只要知道对应的颜色就可以啦:
colorPrimary:标题栏背景色
colorPrimaryDark:状态栏的背景色
textColorPrimary:标题栏上的文字,图标等的背景色,对图actionbar有用,但是现在我们用toolbar代替actionbar,暂时无用
colorAccent:各控制元件(如:check box、switch 或是 radoi) 被勾选 (checked) 或是选定 (selected) 的颜色。
colorControlNormal:各控制元件的预设颜色。各个空间触发就是上面的颜色
windowBackground:App 的背景色。
navigationBarColor:导航栏的背景色,但只能用在 API Level 21 (Android 5) 以上的版本
2.toolbar样式设计:参考 http://www.jianshu.com/p/91eabe0c326d
这边补充点为:android默认就两种风格,白底黑字带有light的还有就是黑底白字。app:popupTheme表示为点击三点弹出的框框的样式,
app:theme 表示当前view的样式
这边测试的完整代码:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/main_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.AppBarOverlay" app:theme="@style/MyCustomToolBarStyle"> <TextView android:id="@+id/toolbar_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:textSize="18sp"/> </android.support.v7.widget.Toolbar> </LinearLayout>
styles.xml
<resources> <!-- 整个APP的样式 --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item><!--原色,标题栏底部背景颜色--> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!--色彩突显,如checkView以及EditText和其他控件的按钮样式颜色--> <item name="android:textColorPrimary">@android:color/holo_green_dark</item><!--title 或者默认返回按钮 或者三点 这类的颜色--> </style> <!--mainActivity的样式--> <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> <!--点击三点弹出框的样式--> <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" > </style> <!--标题栏的字体样式--> <style name="MyCustomToolBarStyle" parent="ThemeOverlay.AppCompat.Light"> <item name="android:textColorPrimary">@color/textColorPrimary</item><!--用来定义标题栏文字颜色,setTitle时使用,自定义的toolbar中的textView不起效果--> <item name="android:textColorSecondary">@color/textColorSecondary</item><!--用来定义弹出菜单icon的颜色(竖着排列的那三个点颜色,以及返回按钮等)--> <item name="android:textColor">@color/colorAccent</item><!--用来定义弹出菜单OptionMenu文字的颜色,自定义的toolbar中的textView有效果--> </style> </resources>
MainActivity.java
package com.one.minyuchun.startone; import android.content.Context; import android.content.Intent; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.TextView; import android.widget.Toast; import com.one.minyuchun.startone.utils.Util; import org.w3c.dom.Text; public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private TextView titleTxt; private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initTitleOne(); } private void initTitleOne() { toolbar=(Toolbar) findViewById(R.id.main_toolbar); setSupportActionBar(toolbar); setTitle("你好啊",true); setBack(); } /** * 显示图标与是否在中间显示 * @param title 标题 * @param isCenter 是否中间显示 */ public void setTitle(String title,boolean isCenter){ titleTxt = (TextView)findViewById(R.id.toolbar_title); if(isCenter){ titleTxt.setText(title); }else{ setTitle(title); } toolbar.setLogo(R.mipmap.ic_launcher); } public void setBack(){ getSupportActionBar().setDisplayHomeAsUpEnabled(true);//给左上角图标的左边加上一个返回的图标 getSupportActionBar().setDisplayShowHomeEnabled(true);////使左上角图标是否显示,如果设成false,则没有程序图标,仅仅就个标题,否则,显示应用程序图标 getSupportActionBar().setHomeButtonEnabled(true);//这个小于4.0版本的默认值为true的。但是在4.0及其以上是false,该方法的作用:决定左上角的图标是否可以点击。没有向左的小图标 getSupportActionBar().setDisplayShowTitleEnabled(true); } @Override public boolean onCreatePanelMenu(int featureId, Menu menu) { getMenuInflater().inflate(R.menu.search,menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case R.id.search: Toast.makeText(this,"search",Toast.LENGTH_SHORT).show(); break; } return super.onOptionsItemSelected(item); } @Override public void onClick(View view) { switch (view.getId()){ } } }
代码不难,看着参考资料以及代码应该可以全通。
1、其他修改:修改右边三点的样式:可在activity的theme模式中中进行修改,如上述activity使用AppTheme.NoActionBar,添加其中提条item,变为如下:
<!--mainActivity的样式--> <style name="AppTheme.NoActionBar"> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> <item name="android:src">@android:drawable/ic_menu_call</item> </style>
三点变成删除图标,但是点击效果相同。
2、其他修改:修改点击右边三点弹出的选择框样式,显示是不仅显示文字同时显示图标,在MainActivity.java 中重写自带的方法如下:
/*** * 将三点内的muen展现图标和文字 * @param view * @param menu * @return */ @Override protected boolean onPrepareOptionsPanel(View view, Menu menu) { if (menu != null) { if (menu.getClass() == MenuBuilder.class) { try { Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE); m.setAccessible(true); m.invoke(menu, true); } catch (Exception e) { e.printStackTrace(); } } } return super.onPrepareOptionsPanel(view, menu); }
3、其他修改:点击左上角显示的默认返回按钮或者toolbar.setNavigationIcon()设置的图表时,获取点击事件需要重写自带的onOptionsItemSelected方法,代码如下:
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()){ case android.R.id.home: onBackPressed(); break; } return super.onOptionsItemSelected(item); } //onBackPressed();方法也是自带的方法,默认为执行finish(),可重写,这边添加此方法使得点击导航栏的返回按钮与点击标题栏返回按钮执行效果一致。
4、其他修改:点击左上角返回按钮使得关闭当前activity并且跳转到指定的activity,修改AndroidManifest.xml在其activity标签下添加属性android:parentActivityName="activity包名",并在mainActivity.java中设置setDisplayHomeAsUpEnabled(true)代码如下:
<activity android:name="com.example.myfirstapp.DisplayMessageActivity" android:label="@string/title_activity_display_message" android:parentActivityName="com.example.myfirstapp.MainActivity" > <!-- Parent activity meta-data to support 4.0 and lower --> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.example.myfirstapp.MainActivity" /> </activity> //添加<meta-data 以便适应4.0一下版本
@Override public void onCreate(Bundle savedInstanceState) { ... getSupportActionBar().setDisplayHomeAsUpEnabled(true); }
5、其他修改:menu不管怎么设置不出现,menu只存在于overflow(右边三点中),不显示问题,将menu中的代码修改如下:
<?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"> <item app:showAsAction="always" android:id="@+id/user_p" android:icon="@android:drawable/ic_menu_add" android:title="用户"/> <item android:id="@+id/write_p" android:icon="@android:drawable/ic_menu_delete" app:showAsAction="always" android:title="发布"/> <item android:id="@+id/favo_p" android:icon="@android:drawable/ic_menu_more" app:showAsAction="always" android:title="收藏"/> </menu> //所有的showAsAction都用app:前缀替换android:前缀,添加xmlns:app引用,如果还不能出现请查看所有theme设置
6、其他修改:使用app:actionViewClass="android.widget.SearchView"做出标题栏点击放大镜按钮出现搜索栏,代码如下
<?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"> <item android:id="@+id/search" android:title="search" android:icon="@android:drawable/ic_search_category_default" app:showAsAction="collapseActionView|ifRoom" app:actionViewClass="android.support.v7.widget.SearchView">
</item>
</menu>
//注意使用app:actionViewClass代替android:actionViewClass,使用android.support.v7.widget.SearchView代替android.widget.SearchView
代码中获取SearchView的字数变化方法,重写onCreatePanelMenu中的方法,代码如下:
@Override public boolean onCreatePanelMenu(int featureId, Menu menu) { Log.i(TAG,"onCreatePanelMenu"); getMenuInflater().inflate(R.menu.search,menu); MenuItem searchItem=menu.findItem(R.id.toolbar_search); if(searchItem!=null){ final SearchView searchView=(SearchView)searchItem.getActionView(); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { //点击确认搜索按钮是执行 @Override public boolean onQueryTextSubmit(String query) { Log.i(TAG,"query "+query); if( ! searchView.isIconified()) { searchView.setIconified(true); } return false; } //动态检测文字变化之行 @Override public boolean onQueryTextChange(String newText) { Log.i(TAG,"newText "+newText); return false; } }); //点击后面的x按钮 searchView.setOnCloseListener(new SearchView.OnCloseListener() { @Override public boolean onClose() { return false; } }); } return true; }
3.toolbar其他的设置
getSupportActionBar().setDisplayHomeAsUpEnabled(true);//给左上角图标的左边加上一个返回的图标,与toolbar的setNavigationIcon效果相同,同时设置时此覆盖 getSupportActionBar().setDisplayShowHomeEnabled(true);//用来控制是否显示toolbar的Logo或者actionbar的icon,这两个其实为相同设置 getSupportActionBar().setHomeButtonEnabled(true);//小于4.0版本的默认为true,在4.0以上是false,作用:决定左上角的图标是否可以点击。没有向左的小图标,目前测试无效果 getSupportActionBar().setDisplayShowTitleEnabled(true);//是否显示默认的title标题,包括subtitle, getSupportActionBar().setIcon(R.mipmap.ic_launcher);//设置图标,与toolbar的logo效果相同,同时设置时,此设置覆盖 toolbar.setNavigationIcon(android.R.drawable.ic_menu_delete);//给左上角图标的左边加上一个返回的图标,与actionbar的setDisplayHomeAsUpEnabled效果相同,同时设置时此被覆盖 toolbar.setLogo(R.mipmap.ic_launcher);//设置图标,与actionbar的setIcon效果相同,同时设置时,此设置被覆盖 toolbar.setTitle("");//设置toolbar默认标题。使其有效需要将该设置写在setSupportActionBar(toolbar);之前
参考其他优秀文章:http://blog.csdn.net/c12366456/article/details/51534816
http://blog.csdn.net/guolin_blog/article/details/18234477
http://www.cnblogs.com/yc-755909659/p/4290784.html
最新的toolbar使用效果参考:http://www.jianshu.com/p/1078568e859f