Skip to content

Commit dc6ed5e

Browse files
CharonChuiCharonChui
committed
Add MaterialDesign使用.md
1 parent 7864be0 commit dc6ed5e

File tree

1 file changed

+295
-0
lines changed

1 file changed

+295
-0
lines changed

‎Android加强/MaterialDesign使用.md‎

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,301 @@ MaterialDesign使用
77
使用`eclipse`或`Android Studio`进行开发时，直接在`Android SDK Manager`中将`Extras->Android Support Library`
88
升级至最新版即可。
99

10+
下面我就简单讲解一下如何通过`support v7`包来使用`Material Design`进行开发。
11+
12+
Material Design Theme
13+
---
14+
`Material`主题:
15+
- @android:style/Theme.Material (dark version) -- Theme.AppCompat
16+
- @android:style/Theme.Material.Light (light version) -- Theme.AppCompat.Light
17+
- @android:style/Theme.Material.Light.DarkActionBar -- Theme.AppCompat.Light.DarkActionBar
18+
19+
对应的效果分别如下:
20+
21+
![Image](https://raw.githubusercontent.com/CharonChui/Pictures/master/Material_theme.png?raw=true)
22+
23+
使用ToolBar
24+
---
25+
26+
- 禁止Action Bar
27+
可以通过使用`Material theme`来让应用使用`Material Design`。想要使用`ToolBar`需要先禁用`ActionBar`。
28+
可以通过自定义`theme`继承`Theme.AppCompat.Light.NoActionBar`或者在`theme`中通过以下配置来进行。
29+
```xml
30+
<item name="windowActionBar">false</item>
31+
<item name="android:windowNoTitle">true</item>
32+
```
33+
下面我通过第二种方式来看一下具体的实现:
34+
在`style.xml`中自定义`AppTheme`:
35+
```
36+
<!-- Base application theme. -->
37+
<style name="AppTheme" parent="AppTheme.Base"/>
38+
39+
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
40+
<!-- Tell Android System that we will use ToolBar instead of ActionBar -->
41+
<item name="windowNoTitle">true</item>
42+
<item name="windowActionBar">false</item>
43+
<!-- colorPrimary is used for the default action bar background -->
44+
<item name="colorPrimary">@color/colorPrimary</item>
45+
46+
<!-- colorPrimaryDark is used for the status bar -->
47+
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
48+
49+
<!-- colorAccent is used as the default value for colorControlActivated
50+
which is used to tint widgets -->
51+
<item name="colorAccent">@color/colorAccent</item>
52+
</style>
53+
```
54+
配置的这几种颜色分别如下图所示:
55+
![Image](https://raw.githubusercontent.com/CharonChui/Pictures/master/material_color.png?raw=true)
56+
57+
58+
59+
60+
在`values-v21`中的`style.xml`中同样自定义`AppTheme`主题:
61+
```xml
62+
<style name="AppTheme" parent="AppTheme.Base">
63+
<!-- Customize your theme using Material Design here. -->
64+
<item name="android:windowContentTransitions" >true</item>
65+
<item name="android:windowAllowEnterTransitionOverlap" >true</item>
66+
<item name="android:windowAllowReturnTransitionOverlap">true</item>
67+
<item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
68+
<item name="android:windowSharedElementExitTransition">@android:transition/move</item>
69+
</style>
70+
```
71+
72+
在`Manifest`文件中设置`AppTheme`主题:
73+
```
74+
<application
75+
android:allowBackup="true"
76+
android:icon="@mipmap/ic_launcher"
77+
android:label="@string/app_name"
78+
android:theme="@style/AppTheme" >
79+
<activity
80+
...
81+
</activity>
82+
<activity android:name="com.charon.materialsample.FriendsActivity"></activity>
83+
</application>
84+
```
85+
这里说一下为什么要在`values-v21`中也自定义个主题，这是为了能让在`21`以上的版本能更好的使用`Material Design`，
86+
在21以上的版本中会有更多的动画、特效等。
87+
88+
- 让Activity继承AppCompatActivity
89+
```java
90+
public class MainActivity extends AppCompatActivity {
91+
...
92+
}
93+
94+
```
95+
96+
- 在布局文件中进行声明
97+
98+
生命`toolbar.xml`，我们把他单独放到一个文件中，方便多布局使用:
99+
```
100+
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
101+
xmlns:local="http://schemas.android.com/apk/res-auto"
102+
android:id="@+id/toolbar"
103+
android:layout_width="match_parent"
104+
android:layout_height="wrap_content"
105+
android:background="?attr/colorPrimary"
106+
android:minHeight="?attr/actionBarSize"
107+
local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
108+
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
109+
```
110+
在`Activity`的布局中使用`ToolBar`:
111+
```xml
112+
<LinearLayout
113+
android:layout_width="match_parent"
114+
android:layout_height="match_parent"
115+
android:orientation="vertical">
116+
117+
<include
118+
android:id="@+id/toolbar"
119+
layout="@layout/toolbar" />
120+
121+
<com.charon.materialsample.view.PagerSlidingTabStrip
122+
android:id="@+id/psts_main"
123+
android:layout_width="match_parent"
124+
android:layout_height="48dip"
125+
android:background="@color/colorPrimary" />
126+
127+
<android.support.v4.view.ViewPager
128+
android:id="@+id/vp_main"
129+
android:layout_width="match_parent"
130+
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
131+
132+
</LinearLayout>
133+
```
134+
135+
- 在Activity中设置ToolBar
136+
```java
137+
public class MainActivity extends AppCompatActivity{
138+
private Context mContext;
139+
private Toolbar mToolbar;
140+
141+
@Override
142+
protected void onCreate(Bundle savedInstanceState) {
143+
super.onCreate(savedInstanceState);
144+
setContentView(R.layout.activity_main);
145+
mContext = this;
146+
mToolbar = (Toolbar) findViewById(R.id.toolbar);
147+
mToolbar.setTitle(R.string.app_name);
148+
// 将ToolBar设置为ActionBar，这样一设置后他就能像ActionBar一样直接显示menu目录中的菜单资源
149+
// 如果不用该方法，那ToolBar就只是一个普通的View，对menu要用inflateMenu去加载布局。
150+
setSupportActionBar(mToolbar);
151+
getSupportActionBar().setDisplayShowHomeEnabled(true);
152+
}
153+
```
154+
155+
到这里运行项目就可以了，就可以看到一个简单的`ToolBar`实现。
156+
157+
接下来我们看一下`ToolBar`中具体有哪些内容:
158+
159+
![Image](https://raw.githubusercontent.com/CharonChui/Pictures/master/ToolBar_content.jpg?raw=true)
160+
161+
我们可以通过对应的方法来修改他们的属性:
162+
![Image](https://raw.githubusercontent.com/CharonChui/Pictures/master/toolbarCode.png?raw=true)
163+
164+
对于`ToolBar`中的`Menu`部分我们可以通过一下方法来设置:
165+
```java
166+
toolbar.inflateMenu(R.menu.menu_main);
167+
toolbar.setOnMenuItemClickListener();
168+
```
169+
或者也可以直接在`Activity`的`onCreateOptionsMenu`及`onOptionsItemSelected`来处理:
170+
```java
171+
@Override
172+
public boolean onCreateOptionsMenu(Menu menu) {
173+
// Inflate the menu; this adds items to the action bar if it is present.
174+
getMenuInflater().inflate(R.menu.menu_main, menu);
175+
return true;
176+
}
177+
178+
@Override
179+
public boolean onOptionsItemSelected(MenuItem item) {
180+
// Handle action bar item clicks here. The action bar will
181+
// automatically handle clicks on the Home/Up button, so long
182+
// as you specify a parent activity in AndroidManifest.xml.
183+
int id = item.getItemId();
184+
185+
//noinspection SimplifiableIfStatement
186+
if (id == R.id.action_settings) {
187+
return true;
188+
}
189+
if (id == R.id.action_search) {
190+
Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.LENGTH_SHORT).show();
191+
return true;
192+
}
193+
return super.onOptionsItemSelected(item);
194+
}
195+
```
196+
`menu`的实现如下:
197+
```xml
198+
<menu xmlns:android="http://schemas.android.com/apk/res/android"
199+
xmlns:app="http://schemas.android.com/apk/res-auto"
200+
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
201+
202+
<item
203+
android:id="@+id/action_search"
204+
android:title="@string/action_search"
205+
android:orderInCategory="100"
206+
android:icon="@drawable/ic_action_search"
207+
app:showAsAction="ifRoom" />
208+
209+
<item
210+
android:id="@+id/action_settings"
211+
android:title="@string/action_settings"
212+
android:orderInCategory="100"
213+
app:showAsAction="never" />
214+
215+
</menu>
216+
```
217+
218+
如果想要对`NavigationIcon`添加点击实现:
219+
```java
220+
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
221+
@Override
222+
public void onClick(View v) {
223+
onBackPressed();
224+
}
225+
});
226+
```
227+
228+
运行后发现我们强大的`Activity`切换动画怎么在`5.0`一下系统上实现呢？`support v7`包也帮我们考虑到了。使用`ActivityOptionsCompat`
229+
及`ActivityCompat.startActivity`，但是悲剧了，他对4.0一下基本都无效，而且就算在4.0上很多动画也不行，具体还是用其他
230+
大神在`github`写的开源项目吧。
231+
232+
233+
- 动态取色Palette
234+
235+
`Palette`这个类中可以提取一下集中颜色：　　
236+
237+
- Vibrant （有活力）
238+
- Vibrant dark（有活力 暗色）
239+
- Vibrant light（有活力 亮色）
240+
- Muted （柔和）
241+
- Muted dark（柔和 暗色）
242+
- Muted light（柔和 亮色）
243+
```java
244+
//目标bitmap，代码片段
245+
Bitmap bm = BitmapFactory.decodeResource(getResources(),
246+
R.drawable.kale);
247+
Palette palette = Palette.generate(bm);
248+
if (palette.getLightVibrantSwatch() != null) {
249+
//得到不同的样本，设置给imageview进行显示
250+
iv.setBackgroundColor(palette.getLightVibrantSwatch().getRgb());
251+
iv1.setBackgroundColor(palette.getDarkVibrantSwatch().getRgb());
252+
iv2.setBackgroundColor(palette.getLightMutedSwatch().getRgb());
253+
iv3.setBackgroundColor(palette.getDarkMutedSwatch().getRgb());
254+
}
255+
```
256+
使用DrawerLayout
257+
---
258+
259+
- 布局中的使用
260+
```xml
261+
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
262+
xmlns:app="http://schemas.android.com/apk/res-auto"
263+
xmlns:tools="http://schemas.android.com/tools"
264+
android:id="@+id/drawer_layout"
265+
android:layout_width="match_parent"
266+
android:layout_height="match_parent">
267+
268+
<!--主页面-->
269+
<LinearLayout
270+
android:layout_width="match_parent"
271+
android:layout_height="match_parent"
272+
android:orientation="vertical">
273+
274+
<include
275+
android:id="@+id/toolbar"
276+
layout="@layout/toolbar" />
277+
278+
<com.charon.materialsample.view.PagerSlidingTabStrip
279+
android:id="@+id/psts_main"
280+
android:layout_width="match_parent"
281+
android:layout_height="48dip"
282+
android:background="@color/colorPrimary" />
283+
284+
<android.support.v4.view.ViewPager
285+
android:id="@+id/vp_main"
286+
android:layout_width="match_parent"
287+
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
288+
289+
</LinearLayout>
290+
291+
<!--侧边栏部分-->
292+
<fragment
293+
android:id="@+id/fragment_navigation_drawer"
294+
android:name="com.charon.materialsample.fragment.FragmentDrawer"
295+
android:layout_width="@dimen/nav_drawer_width"
296+
android:layout_height="match_parent"
297+
android:layout_gravity="start"
298+
app:layout="@layout/fragment_navigation_drawer"
299+
tools:layout="@layout/fragment_navigation_drawer" />
300+
301+
</android.support.v4.widget.DrawerLayout>
302+
```
303+
304+
10305

11306
---
12307

0 commit comments

Comments
 (0)