第三章 UI

第二章 UI

標簽（空格分隔）：未分類

疑問

3.5.2，inflate()的第三個參數false是起什么作用？為什么不添加父布局？[定位](#3.5.2 定制ListView的界面)
能否寫出通用的RecyclerViewAdapter和ViewHolder？

知識結構

3.2 常用控件/組件的使用方法 P77

3.2.1 TextView

文字默認為居左上角對齊，通過android:gravity來指定文字的對齊方式。
對控件的高和寬指定固定值會造成適配的問題。

3.2.2 Button

系統會對Button中的所有英文字母自動進行大寫轉換，可以通過android：textAllCaps="false"來禁止。
為點擊事件注冊監聽器的方法：①匿名類；②實現接口。實現接口，可以集中管理點擊事件的邏輯。

3.2.3 EditText

使用android：hint屬性來指定一段提示性文字。
使用android：maxLines屬性來指定EditText的最大行數，避免EditText過分拉長。

3.2.4 ImageView

圖片通常都存放在以“drawable”開頭的不同分辨率的目錄下。

使用android：src屬性來指定圖片的地址。
使用setImageResource()來改變顯示的圖片。

3.2.5 ProgressBar

Android所有控件均有可見屬性，可通過android：visibility屬性進行指定，它有三個取值，visible、invisible、gone。還可以通過setVisibility()方法來設置可見性，可以傳入View.VISIBILE、View.INVISIBLE、View.GONE三個值

通過style屬性來指定多種進度條。
通過android：max來指定progress的最大值。
通過setProgress()和getProgress()方法來操作progress值。

3.2.6 AlterDialog

使用方法如下所示：

AlterDialog.Builder dialog = new AlterDialog.Builder(MainActivity.this);
dialog.setTitle("this is title");
dialog.setMessage("this is message");
dialog.setCancelable(false);
dialog.setPositiveButton("Ok", new DialogInterface.OnClickListener(){
    @Override                
    public void onClick(DialogInterface dialog, int which) {
        //do something
    }
});
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int which) {
         //do something
    }
});
dialog.show();

3.2.7 ProgressDialog

使用方法和AlertDialog較為相似。

注意：在setCancelable()中傳入false，則無法使用Back鍵退出。當數據加載完，必須調用progressDialog的dismiss()方法來關閉對話框。

3.3 詳解4種基本布局 P94

3.3.1 LinearLayout

android:orientation用于指定控件的排列順序。默認為horizontal，水平排列；vertical，水平排列。按照控件在布局代碼中的位置依次排列。
android:layout_gravity用于指定控件在布局中的對齊方式；android:gravity用于指定文字在控件中的對齊方式。

注意：當LinearLayout的排列方式為horizontal時，它所包含的view的android：layout_gravity只能為vertical。同理當LinearLayout的排列方式為vertical時，android：layout_gravity只能為horizontal.

android:layout_weight屬性允許使用比例的方式來指定控件的大小。只有在LinearLayout中才可以使用這個屬性。

以下是規范寫法：

android:layout_width="0dp"
android:layout_weight="1"

3.3.2 RelativeLayout

1.相對父布局定位

android:layout_alignParentRight
android:layout_alignParentLeft
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_centerInParent

2.相對控件定位

android:layout_above
android:layout_below
android:layout_toRightOf
android:layout_toLeftOf
android:layout_alignLeft
android:layout_alignRight
android:layout_alignTop
android:layout_alignBottom

注意：當一個控件引用另一個控件時，該控件一定要定義在另一個控件的后面,否則會出現找不到id的情況

3.3.3 FrameLayout

所有控件默認擺放在布局的左上角。也可以使用android.layout_gravity屬性來指定控件在布局中的對齊方式。因為定位方式存在缺陷，所以使用場景較少。

3.3.4 百分比布局

只有在LinearLayout中才可以使用android.layout_weight屬性。為了能夠按比例指定控件大小，百分比布局為RelativeLayout、FrameLayout提供了PercentRelativeLayout、PercentFrameLayout兩個全新的布局。

使用方法

打開app/build.gradle文件，在dependencies閉包中添加百分比布局依賴。

compile 'com.android.support:percent:24.2.1'

在布局文件中，先寫出最外層完整的包路。還要再定義一個app的命名空間，這樣才能使用百分比布局的自定義屬性。

<android.support.percent.PercentFrameLayout
    xmlns:android="……"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width=……><!--定義app命名空間-->
    
    <Button android:id="@+id/button1"
        android:layout_gravity="left|bottom"
        app:layout_widthPercent=50%
        app:layout_heightPercent=50%/>
        
    <Button android:id="@+id/button2"
        android:laytout_gravity="right|bottom"
        app:layout_widthPercent=50%
        app:layout_heightPercent=50%/>
</android.support.percent.PercentFrameLayout>

注意：在上面的代碼中，能使用app的前綴就是因為剛才定義了app的命名空間。我們能一直使用android前綴的屬性也是同樣的道理。

3.4 創建自定義控件 P109

View是Android中一種最基本的組件，它可以在屏幕上繪制一塊矩形區域，并能響應這塊區域上的各種事件。
ViewGroup是一種特殊的View，它是一個用于放置控件和布局的容器，它可以包含多個子View和子ViewGroup。
所有控件都是直接或間接繼承自View，所有布局都是直接或間接繼承自ViewGroup。

3.4.1 引入布局

<include layout="layout/title"/>

android:padding規定控件與父View的距離；
android:layout_margin規定控件與其它（上下左右）View之間的距離。

如何隱藏系統自帶的標題欄。P111

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        android.support.v7.app.ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.hide();
        }
    }

3.4.2 創建自定義控件

創建自定義控件。先創建一個布局B(TitleLayout)的類,在該類中加載3.4.1中創建的布局A（title），并將B設為A的父布局。再為其中的各個控件添加事件以及功能。

public class TitleLayout extends LinearLayout implements View.OnClickListener{
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title,this);//加載3.4.1中創建的布局A（title），并將B（TitleLayout）設為A的父布局
        Button button_titleBack = (Button)findViewById(R.id.title_back);
        Button button_titleEdit = (Button)findViewById(R.id.title_edit);
        button_titleBack.setOnClickListener(this);
        button_titleEdit.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.title_back:
                ((Activity)getContext()).finish();
                break;
            case R.id.title_edit:
                Toast.makeText(getContext(),"nihao",Toast.LENGTH_SHORT).show();
        }
    }
}

①LayoutInflater.from(context).inflate(R.layout.title,this);
通過LayoutInflaer的from()可以構建出一個LayoutInflater對象，然后調用inflate()動態加載一個布局文件。inflate()方法的第一個參數是要加載的布局文件的id，第二個參數是給加載好的布局再添加一個父布局，這里我們想要指定為TitileLayout，于是直接傳入this。
②((Activity)getContext()).finish();
其實就是從Activity傳了個Context過來，不過因為不只Activity有Context，比如Service也有，所以加了個強制類型轉化。而getContext()得到的是this，就相當于this.finish()，其實一般我們在Activity里直接finish()是一種簡寫。

使用自定義控件。在布局C中，使用自定義控件的完整類名（包名不可省略），就可添加該控件。

<com.example.man.test.TitleLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">    
</com.example.man.test.TitleLayout>

3.5 ListView P113

==ListView==:允許用戶通過手指上下滑動的方式，將屏幕外的數據滾動到屏幕內，同時屏幕上原有的數據會滾動到屏幕外。

3.5.1 ListView的簡單用法

添加控件

<ListView
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

新建一個Adapter，將context、子項（Item）的樣式和data傳入進去。

數組中的數據無法直接傳遞給ListView，需要借助適配器。ArrayAdapter可以通過泛型來指定要匹配的數據類型。

調用setAdapter()為ListView添加Adapter.

private String[] data = {"apple","orange","watermelon","pear","grape","pineapple","strawberry","cherry","mango","banana","apple","orange","watermelon","pear","grape","pineapple", "strawberry","cherry","mango","banana"};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main3);
    ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(Main3Activity.this,android.R.layout.simple_list_item_1,data);
    ListView listView = (ListView)findViewById(R.id.listview);
    listView.setAdapter(arrayAdapter);
}

3.5.2 定制ListView的界面

新建一個Fruit類

public class Fruit {
    private String name;
    private int imageId;

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }
    public String getName() {
        return name;
    }
    public int getImageId() {
        return imageId;
    }
}

新建一個fruit_item布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/fruit_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/fruit_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_gravity="center_vertical"/>
</LinearLayout>

3.新建一個FruitAdapter類

public class FruitAdapter extends ArrayAdapter<Fruit> {
    private int resourceid;

    public FruitAdapter(Context context, int resource, List<Fruit> objects) {
        super(context, resource, objects);
        resourceid=resource;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view = LayoutInflater.from(getContext()).inflate(resourceid,parent,false);
        ImageView fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
        TextView frutiName = (TextView) view.findViewById(R.id.fruit_name);
        frutiName.setText(fruit.getName());
        fruitImage.setImageResource(fruit.getImageId());
        return view;
        //return super.getView(position, convertView, parent);AS自動生成的返回值，但是在這個例子中運行會報錯
    }
}

①getView()在每一個子項被滾動到屏幕內時會被調用。
②LayoutInflater.from(getContext()).inflate(resourceid,parent,false);第三個參數指定為false，表示只讓我們在父布局中聲明的layout屬性生效，但不為view添加父布局。因為一旦view有了父布局之后，它就不能添加到ListView中了。

將context、fruit_item布局和數據傳入FruitAdapter，調用setAdapter()為ListView添加Adapter.

private String[] data = {"apple","orange","watermelon","pear","grape","pineapple","strawberry","cherry","mango","banana","apple","orange","watermelon","pear","grape","pineapple", "strawberry","cherry","mango","banana"};
private List<Fruit> fruitList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main3);
    initFruits();
    ListView listView = (ListView)findViewById(R.id.listview);
    FruitAdapter fruitAdapter = new FruitAdapter(Main3Activity.this,
            R.layout.fruit_item,fruitList);
    listView.setAdapter(fruitAdapter);
}

private void initFruits(){
    for (String f :
            data) {
        Fruit fruit = new Fruit(f,R.drawable.ic_launcher);
        fruitList.add(fruit);
    }
}

3.5.3 提升ListView的運行效率

每次調用getView()時都會加載一遍布局，影響效率。
解決方法：convertView參數可以將加載的布局進行緩存，以便之后可以重用。
每次調用getView()時都會獲取一次控件的實例，影響效率。
解決方法：新建一個ViewHolder類來緩存控件實例。

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Fruit fruit = getItem(position);
        View view;
        ViewHolder viewHolder;
        if (convertView == null){
            view = LayoutInflater.from(getContext()).inflate(resourceid,parent,false);
            viewHolder = new ViewHolder();
            viewHolder.fruitName =(TextView) view.findViewById(R.id.fruit_name);
            viewHolder.fruitImage =(ImageView) view.findViewById(R.id.fruit_image);
            view.setTag(viewHolder);
        }else {
            view = convertView;
            viewHolder =(ViewHolder) view.getTag();
        }
        viewHolder.fruitName.setText(fruit.getName());
        viewHolder.fruitImage.setImageResource(fruit.getImageId());
        return view;
    }

    class ViewHolder{
        ImageView fruitImage;
        TextView fruitName;
    }

3.5.4 ListView的點擊事件

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Fruit fruit = fruitList.get(position);
        Toast.makeText(Main3Activity.this,fruit.getName(),Toast.LENGTH_SHORT).show();
    }
});

注意：
Fruit fruit = getItem(position);只能在Adapter內部使用。
Fruit fruit = fruitList.get(position);則是在聲明fruitList的那個類中使用，這里也就是Main3Activity。

3.6 ListView的增強版RecyclerView

ListView的布局排列是自身管理的，而RecyclerView則是把這個工作交給了LayoutManager。LayoutManager制定了一套可拓展的布局排列接口，子類只要按照接口的規范來實現，就能制定出不同排列方式的布局了。

3.6.1 RecyclerView的基本用法

打開app/build.gradle文件，在dependenceies閉包中添加遠程依賴：

compile 'com.android.support:recyclerview-v7:24.2.1'

在布局文件中，用完整的包路徑添加RecyclerView：

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

新建RecyclerViewAdapter類：

public class FruitRAdapter extends RecyclerView.Adapter<FruitRAdapter.ViewHolder> {
    private List<Fruit> mFruitList;
    static class ViewHolder extends RecyclerView.ViewHolder{
         ImageView fruitImage;
         TextView fruitName;
        public ViewHolder(View itemView) {
            super(itemView);
            fruitImage = (ImageView)itemView.findViewById(R.id.fruit_image);
            fruitName = (TextView)itemView.findViewById(R.id.fruit_name);
        }
    }

    public FruitRAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.fruitImage.setImageResource(mFruitList.get(position).getImageId());
        holder.fruitName.setText(mFruitList.get(position).getName());
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }
}

onCreateViewHolder()用于加載子項（item）布局，創建ViewHolder實例，將布局中的控件實例緩存到ViewHolder中。

onBindViewHolder()用于為ViewHolder中的實例設置屬性。

gerItemCount()用于返回RecyclerView中item的數量。

創建RecyclerViewAdapter的實例，并將context、item布局、data傳遞進去。

為RecycleerView添加Adapter。

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
FruitRAdapter fruitRAdapter = new FruitRAdapter(fruitList);
recyclerView.setAdapter(fruitRAdapter);

LayoutManager用于指定RecyclerView的布局方式，這里使用的LinearLayoutManager是線性布局，可以實現和ListView類似的效果。

3.6.2 實現橫向滾動和瀑布流

實現橫向滾動

修改item布局。LinearLayout改成垂直方向排列，使其適合橫向滾動要求。
在[3.6.1](#3.6.1 RecyclerView的基本用法)的基礎上,調用LinearLayout的setOrientation()來設置布局的排列方向，默認是縱向排列

layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

實現瀑布流

修改item布局。LinearLayout的寬度改為match_parent，因為瀑布流布局中item的寬度是根據布局的列數自動適配的，不是一個固定值。
LinearLayoutManager改為StaggeredGridLayoutManager。StaggeredGridLayoutManager()的第一個參數用于指定布局的列數，第二個參數用于指定布局的排列方向。
```
StaggeredGridLayoutManager layoutManager = new
                StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
```

同理實現網格布局也只需要將LinearLayoutManager改為GridLayoutManager。GridLayoutManager()的第一個參數是context，第二個是網格列數（spanCount）。

3.6.3 RecyclerView的點擊事件

ListView的點擊事件是對整個子項（item）注冊了點擊監聽器，而RecyclerView為了能對item中的所有view添加監聽器，舍棄了子項點擊事件的監聽器，所有的點擊事件都由具體的View去注冊。

public class FruitRAdapter extends RecyclerView.Adapter<FruitRAdapter.ViewHolder> implements View.OnClickListener {
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder{
        View fruitView;//添加了子項的view
        ImageView fruitImage;
        TextView fruitName;
        public ViewHolder(View itemView) {
            super(itemView);
            fruitView = itemView;
            fruitImage = (ImageView)itemView.findViewById(R.id.fruit_image);
            fruitName = (TextView)itemView.findViewById(R.id.fruit_name);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.fruit_item,parent,false);
        final ViewHolder holder = new ViewHolder(view);
        holder.fruitView.setOnClickListener(this);//為item和image分別注冊了點擊監聽器
        holder.fruitImage.setOnClickListener(this);
        return new ViewHolder(view);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.fruit_view:
                Toast.makeText(v.getContext(),"view",Toast.LENGTH_SHORT).show();
                break;
            case R.id.fruit_image:
                Toast.makeText(v.getContext(),"image",Toast.LENGTH_SHORT).show();
                break;
        }
    }
    ...
}

3.7 編寫界面的最佳實踐

3.7.1 制作Nine-Patch圖片 P133

3.7.2 編寫精美的聊天界面

創建一個message類、msg_item.xml、MsgRecyclerViewAdapter類
新建一個MainActivity，在布局中添加RecyclerView、Button、EditText。
在MainActivity中使用RecyclerView。

最后編輯于：2017.12.06 02:28:49

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,247評論 6贊 543
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,520評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,362評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,805評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,541評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,896評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,887評論 3贊 447
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,062評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,608評論 1贊 336
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,356評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,555評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,077評論 5贊 364
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,769評論 3贊 349
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,175評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,489評論 1贊 295
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,289評論 3贊 400
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,516評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频