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系列的初篇，篇幅有限，只能做到一个抛砖引玉，一些比较重要复杂的控件用法，会在后续篇章逐一介绍。

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

AndroidUI初探①兼容组件

前言

兼容组件概述

实现

结语

你可能感兴趣的:(AndroidUI初探①兼容组件)