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

activity_compact_component.xml

由上述代码可以看出 ， 兼容组件和普通组件的用法大致相同，只是引入的UI资源不同，普通组件只会引用对应平台的UI资源，而兼容组件引用的是V7包中的UI资源。

LinearLayoutCompat

LinearLayoutCompactActivity.java

/**
 * LinearLayoutCompact 可以比较方便的实现App设置界面
 * 它根据其每个子元素的位置，进行绘制一条横线，实现Item的分隔
 * 

 * 

 * 原理：
 *     

 *     

 *         首先遍历LinearLayout下的每个子元素，然后进行子元素的测量，然后在计算出Drawable的高度
 *         接着拉到资源的top高度，进行Drawable高度的绘制。
 *     
 */
public class LinearLayoutCompactActivity extends BaseActivity 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

使用android.support.v7.widget.LinearLayoutCompat，寥寥数笔，就可以将一个APP设置界面做出来，摆脱以前那种堆叠控件式的设置界面。

结语

本篇作为Android UI系列的初篇，篇幅有限，只能做到一个抛砖引玉，一些比较重要复杂的控件用法，会在后续篇章逐一介绍。

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