android:theme="@style/apptheme",Theme(主题) Style(风格)

最新推荐文章于 2024-09-22 08:18:30 发布

合参君

最新推荐文章于 2024-09-22 08:18:30 发布

阅读量4.3k

点赞数 1

文章标签： android:theme="@style/apptheme"

3a56180d41fb

ToolBar.jgp.JPG](http://www.jizhuomi.com/android/course/221.html)

Android主题(Theme)和风格(Style)

类似Web开发中，HTML代码负责内容部分，CSS部分负责表现部分，可以把内容和形式分离开。同样在Android的开发中，我们可以使用Theme、Style+UI组件的方式，实现内容和形式的分离，做到界面的自定义。这样可以避免重复的工作，而且便于后期项目的维护。

风格Style是一个包含一种或多种格式化属性的集合，你可以把它应用在UI组件上。主题Theme也是一个包含一种或多种格式化属性的集合，你可以把它应用在整个应用程序(Application)中或者某个窗口(Activity)中.

定义一个style或者theme的方法是一样的。在res/values/目录下简历style.xml或者theme.xml文件，在xml中建立形如这样的代码：

theme和style一样可以继承

自定义主题(Theme)和风格(Style)

Android的style的使用

在res/values/styles.xml中resource中定义三个样式，

38sp

#128

1.0

#035

...

然后在res/layout文件下的activity_main.xml中的控件中引用刚才定义的Style。

android:id = "@+id/textView1"

style = "@style/TextView"

android:layout_width = "wrap_content"

android:layout_height="wrap_content"

android:text = "@string/hello_world">

...

Android的Theme的使用

首先在res/values/themes.xml定义Theme

true

60dip

@style/WindowTitl

#234

true

#658

2.75

在mainfest.xml中应用主题：

然后在AndroidManifest.xml中使用刚才定义的主题。

只要定义application的android:theme属性为style/Theme即可

android:allowBackup="true"

android:icon = "@drawable/ic_launcher"

android:label = "@string/app_name"

android:theme = "@style/Theme">

android:name = ""

android:label="@string/app_name">

在程序中使用主题的方法：

也可以用setTheme(R.style.Theme)来调用主题。

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setTheme(android.R.style.Theme_Light);

setContentView(R.layout.linear_layout_3);

}

一些补充

theme和style文件中资源引用方式

我们用@符号和？符号来应用资源。@符号表明了我们应用的资源是前边定义过的(或者在前一个项目中或者在Android 框架中)。问号？表明了我们引用的资源的值在当前的主题当中定义过。

Android中提供了几种内置的资源，有好几种主题你可以切换而不用自己写。比如你可以用对话框主题来让你的Activity看起来像一个对话框。在manifest中定义如下：

继承，用parent实现

如果你喜欢一个主题，但是想做一些轻微的改变，你只需要将这个主题添加为父主题。比如我们修改Theme.Dialog主题。我们来继承Theme.Dialog来生成一个新的主题。

继承了Theme.Dialog后，我们可以按照我们的要求来调整主题。我们可以修改在Theme.Dialog中定义的每个item元素的值，然后我们在Android Manifest 文件中使用CustomDialogTheme 而不是 Theme.Dialog 。

style，可继承的样式，可以参照sdk的

docs/guide/topics/ui/themes.html#PlatformStyles文件

在style中可以定义的属性，可以参考sdk的

docs/reference/android/R.attr.html

需要查阅系统自带的主题，可以在文档的

reference-->android-->R.style 中查看。

Android:Theme.Material和Theme.AppCompat

首先要了解的当然是其主题的风格以及app bar.

Material Design的Theme

md的主题有：

@android:style/Theme.Material

@android:style/Theme.Material.Light

@android:style/Theme.MaterialLight.DarkActionBar

与之对应的Compat Theme：

Theme.AppCompat

Theme.AppCompat.Light

Theme.AppCompat.Light.DarkActionBar

个性化的Color Palette

我们可以根据我们的app风格，去定制Color Palette(调色板)，重点有以下几个属性：

@color/material_blue_500

@color/material_blue_700

@color/material_green_A200

colorPrimary对应ActionBar的颜色

colorPrimaryDark对应状态栏的颜色

colorAccent对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

3a56180d41fb

AppCompat.jpg

metarial design的theme允许我们去设置status bar的颜色，如果你项目的最小支持版本为5.0，那么你可以使用android:Theme.Material

，设置android:statusBarColor

。当然了这种情况目前来说比较少，所以我们多数使用的是Theme.AppCompat

，通过设置android:colorPrimaryDark.

来设置status bar颜色。(ps：默认情况下，android:statusBarColor

的值继承自android:colorPrimaryDark

对于5.0以下的设备，目前colorPrimaryDark

无法去个性化状态栏的颜色；底部的navagationBar可能也不一样，更别说设置颜色了

一个例子：

values/styles.xml

@color/material_blue_500

@color/material_blue_700

@color/material_green_A200

values-v21/styles.xml

@color/material_blue_700

values/colors.xml

#009688

#00796B

#FD87A9

ToolBar的使用

在使用ActionBar的时候，会很多问题：这个文字能不能定制，位置能不能改变，图标的间距怎么控制等等，ActionBar设计不灵活。为此官方提供了ToolBar，并且提供了support library用于向下兼容。

Toolbar之所以灵活，是因为它其实就是一个ViewGroup,我们在使用的时候和普通的组件一样，在布局文件中声明。

(1)ToolBar的引入

a) 隐藏原来的ActionBar

隐藏可以通过修改我们继承的主题为：Theme.AppCompat.Light.NoActionBar,当然也可以通过设置以下属性完成：

false

true

我们这里使用前者

@color/material_blue_500

@color/material_blue_700

@color/material_green_A200

b)在布局文件中声明

android:id="@+id/id_toolbar"

android:layout_height = "wrap_content"

android:layout_width = "match_parent"

实际使用布局文件

xmlns:android="http://schemas.android.c

om/apk/res/android"

android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto">

android:id="@+id/id_toolbar"

android:layout_height="wrap_content"

android:layout_width="match_parent" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizonta" app:useDefaultMargins="true"

app:columnCount="3">

android:text="First Name:"

app:layout_gravity="right" />

android:ems="10"

app:layout_columnSpan="2" />

android:text="Last Name:"

app:layout_column="0"

app:layout_gravity="right" />

android:ems="10"

app:layout_columnSpan="2" />

android:text="Visit Type:"

app:layout_column="0"

app:layout_gravity="right" />

app:layout_columnSpan="2">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Business" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Social" />

android:text="Ok"

app:layout_column="1" />

android:text="Cancel"

app:layout_column="2" />

c)代码中设定

public class MainActivity extends AppCompatActivity{

@Override

protected void onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar=(Toolbar)findViewById(R.id.id_toolbar);

setSupportActionBar(toolbar);

}

ok,就是先隐藏ActionBar，然后在布局文件中声明，最后代码中设定以下。现在看一下效果图：

3a56180d41fb

ToolBar.jgp.JPG

可以看到我们的ToolBar显示出来了，默认的Title为ToolBar，但是这个样式实在是不敢恭维，下面看我们如何定制它。

(2)定制ToolBar

首先给它一个nice的背景色，还记得前面的colorPrimary么，用于控制ActionBar的背景色的。当然这里我们的ToolBar就是一个普通的ViewGroup在布局中，所以我们直接使用background就好，值可以为:?attr/colorPrimary使用主题中定义的值。

ToolBar中包含Nav Icon,Logl,Title,Sub Title, Menu Items.

我们可以通过代码设置上述ToolBar中的控件：

@Override

protected void onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar=(Toolbar)findViewById(R.id.id_toolbar);

//App Logo

toolbar.setLogo(R.mipmap.ic_launcher);

//Title

toolbar.setTitle("App Title");

//Sub Title

toolbar.setSubtitle("Sub title");

setSupportActionBar(toolbar);

//Navigation Icon

toolbar.setNavigationIcon(R.drawable.ic_toc_white_24dp);

可选方案，当然如果你喜欢，也可以在布局文件中去设置部分属性：

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"/>

至于Menu Item，依然支持在menu/menu_main.xml去声明，然后复写onCreateOptionsMenu和onOptionsItemSelected即可。

可选方案，也可以通过

toolbar.setOnMenuItemClickListener实现点击MenuItem的回调

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {

@Override

public boolean onMenuItemClick(MenuItem item) {

return false;

}

});

效果图

3a56180d41fb

toolbar_效果图.JPG

关于字体的样式，可以在布局文件设置属性

app:titleTextApperance,

app:subtitleTextApperance

或者代码

setTitleTextApperance,

setSubTitleTextApperance

设置

实战

简单介绍Toolbar后，计划整合Toolbar、DrawerLayout、ActionBarDrawerToggle写个实用的例子。

大致思路：

整体实现还是比较容易的，首先需要引入DrawerLayout，(如果你对DrawerLayout不了解，可以参考 Android DrawerLayout 高仿QQ5.2双向侧滑菜单)，然后去初始化mActionBarDrawerToggle,mActionBarDrawerToggle实际上是个DrawerListener，设置mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);就已经能够实现上面点击Nav Icon切换效果了。当然了细节还是挺多的。

我们的效果图，左侧菜单为Fragment，内容区域为Fragment，点击左侧菜单切换内容区域的Fragment即可。关于Fragment的知识，可以查看：Android Fragment 你应该知道的一切

.布局文件：

activity_main.xml

参考