前言
俗话说：“人靠衣装，美靠靓装” 。这是一个看脸的时代 ，在IOS系统中有专门的一款内置应用，就叫FaceTime ， 乔老爷子可谓是有先见之明，早就看穿我们这些凡俗的人类 。
在这个体验为王的时代 ， 一个好的UI几乎可以决定一个产品的成败 ， 功能性已经不具备竞争力了，除非没有选择 。作为一名Android开发人员，UI往往被人诟病，因为以前原生的UI组件，实在是丑得可以 ， 或许是因其Google的工程师文化，起初对UI并不在意 ， 但随着Android蓬勃发展 ， 很多大公司都出了自己的一套UI规范，Android才在5.0的时候推出了自己的UI设计语言（Material Design）。Material Design将拟物设计和扁平化设计相结合，给人一种光感物幻的感觉 ， 就像纸张的在不同光影下的不同变换，根据物理的规律呈现一种自然的动态质感。
兼容组件概述
Material Design UI是在5.0才开始应用的，那是不是意味着在5.0之前就不能构建如此之炫的UI呢？答案是否定的，Google在support v7中为我们准备了最基本的Material Design组件 ， 都是以AppCompactxxx开头。更有CardView、gridlayout、mediarouter、palette、preference、recyclerView这些重量级组件，这些组件后续都会一一介绍。
AppCompact
部分AppCompact组件
这些AppCompact的基础组件，和以前的组件用法差不多，只是UI方面有所差别，这里列举几个。
效果 ，模拟器Android版本 4.1.1
效果图，模拟器4.1.1
实现
CompactAlertDialog
/**
* AlertDialog Compact 4.0也会有比较好的效果 , 需要引入android.support.v7.app.AlertDialog;包
*/
private void showCompactAlertDialog() {
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("提示");
builder.setMessage("是否删除此项 ？");
builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(CompactComponentActivity.this, "删除成功", Toast.LENGTH_SHORT).show();
dialogInterface.dismiss();
}
});
builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
Toast.makeText(CompactComponentActivity.this, "已取消", Toast.LENGTH_SHORT).show();
dialogInterface.dismiss();
}
});
builder.show();
}
ListPopupWindow
/**
* 依附于按钮的List popup window
* @param view
*/
private void showListPopupWindow(View view) {
final String[] datas = {"流水落花","春去也","天上人间"};
ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_list_item_1,datas);
final ListPopupWindow listPopupWindow = new ListPopupWindow(this);
listPopupWindow.setAnchorView(view);
listPopupWindow.setAdapter(adapter);
// Item click
listPopupWindow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Toast.makeText(CompactComponentActivity.this, datas[i], Toast.LENGTH_SHORT).show();
listPopupWindow.dismiss();
}
});
listPopupWindow.show();
}
MenuPopupWindow
/**
* 依附于按钮的Popup Menu
* @param view
*/
private void showMenuPopupWindow(View view) {
PopupMenu popupMenu = new PopupMenu(this,view);
Menu menu = popupMenu.getMenu();
SubMenu subMenu = menu.addSubMenu("sub menu");
subMenu.add("meu");
popupMenu.getMenuInflater().inflate(R.menu.popup_menu,popupMenu.getMenu());
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
Toast.makeText(CompactComponentActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();
return false;
}
});
popupMenu.show();
}
menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/add"
android:title="Add"
/>
<item
android:id="@+id/del"
android:title="Del" />
</menu>
activity_compact_component.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_compact_component"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp"
tools:context=".view.compactui.CompactComponentActivity">
<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_compact_alert_dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/compact_alertdialog"
/>
<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_list_popup_window"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/list_popupwindow"
/>
<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_menu_popup_window"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/Menu_popupwindow"
/>
<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_linearlayout_compact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/linearlayoutcompact"
/>
<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_read_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/read_me"
/>
</LinearLayout>
由上述代码可以看出 ， 兼容组件和普通组件的用法大致相同，只是引入的UI资源不同，普通组件只会引用对应平台的UI资源，而兼容组件引用的是V7包中的UI资源。
LinearLayoutCompat
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_linear_layout_compact_demo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.zeno.advancedui.view.compactui.LinearLayoutCompactActivity">
<android.support.v7.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:divider="@drawable/linear_layout_compact_divider"
app:showDividers="middle"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="联系方式"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="400-600-2332"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="关于我们"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="雨溪工作室"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="当前版本"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="V 1.1"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingBottom="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="当前用户"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="雨溪"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</android.support.v7.widget.LinearLayoutCompat>
</FrameLayout>
LinearLayoutCompactActivity.java
/**
* LinearLayoutCompact 可以比较方便的实现App设置界面
* 它根据其每个子元素的位置，进行绘制一条横线，实现Item的分隔
* <br/>
* <br/>
* 原理：
* <br/>
* <p>
* 首先遍历LinearLayout下的每个子元素，然后进行子元素的测量，然后在计算出Drawable的高度
* 接着拉到资源的top高度，进行Drawable高度的绘制。
* </p>
*/
public class LinearLayoutCompactActivity extends BaseActivity<ILinearLayoutCompactView,LinearLayoutCompactPresenter> implements ILinearLayoutCompactView {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_linear_layout_compact_demo);
}
@Override
protected LinearLayoutCompactPresenter createPresenter() {
return new LinearLayoutCompactPresenter();
}
}
linear_layout_compact_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<size android:height="0.1dp"/>
<solid android:color="@color/linear_layout_compact_divider_color"/>
</shape>
使用android.support.v7.widget.LinearLayoutCompat，寥寥数笔，就可以将一个APP设置界面做出来，摆脱以前那种堆叠控件式的设置界面。
结语
本篇作为Android UI系列的初篇，篇幅有限，只能做到一个抛砖引玉，一些比较重要复杂的控件用法，会在后续篇章逐一介绍。
学习是一个输入输出的过程 。古人有言：学而不思则罔 ， 思而不学则殆 。古人虽告诉了我们明路 ， 却不告诉我们该怎么做，怎么学，怎么思。修学之事，目前大抵有这么几种，看书 ， 看人，看事 ， 看视频 。沉思之事，就我所知，著书 ， 立说 ， 教书育人 。 目前而言 ， 写作是最简单，也是比较有效的输出途径了 。
