AndroidUI初探①兼容组件

前言

俗话说：“人靠衣装，美靠靓装” 。这是一个看脸的时代 ，在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系列的初篇，篇幅有限，只能做到一个抛砖引玉，一些比较重要复杂的控件用法，会在后续篇章逐一介绍。

学习是一个输入输出的过程 。古人有言：学而不思则罔 ， 思而不学则殆 。古人虽告诉了我们明路 ， 却不告诉我们该怎么做，怎么学，怎么思。修学之事，目前大抵有这么几种，看书 ， 看人，看事 ， 看视频 。沉思之事，就我所知，著书 ， 立说 ， 教书育人 。 目前而言 ， 写作是最简单，也是比较有效的输出途径了 。