第三章 UI

第二章 UI

標(biāo)簽（空格分隔）： 未分類(lèi)

疑問(wèn)

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

知識(shí)結(jié)構(gòu)

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

3.2.1 TextView

  • 文字默認(rèn)為居左上角對(duì)齊，通過(guò)android:gravity來(lái)指定文字的對(duì)齊方式。
  • 對(duì)控件的高和寬指定固定值會(huì)造成適配的問(wèn)題。

3.2.2 Button

  • 系統(tǒng)會(huì)對(duì)Button中的所有英文字母自動(dòng)進(jìn)行大寫(xiě)轉(zhuǎn)換，可以通過(guò)android：textAllCaps="false"來(lái)禁止。
  • 為點(diǎn)擊事件注冊(cè)監(jiān)聽(tīng)器的方法：①匿名類(lèi)；②實(shí)現(xiàn)接口。實(shí)現(xiàn)接口，可以集中管理點(diǎn)擊事件的邏輯。

3.2.3 EditText

  • 使用android：hint屬性來(lái)指定一段提示性文字。
  • 使用android：maxLines屬性來(lái)指定EditText的最大行數(shù)，避免EditText過(guò)分拉長(zhǎng)。

3.2.4 ImageView

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

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

3.2.5 ProgressBar

Android所有控件均有可見(jiàn)屬性，可通過(guò)android：visibility屬性進(jìn)行指定，它有三個(gè)取值，visible、invisible、gone。還可以通過(guò)setVisibility()方法來(lái)設(shè)置可見(jiàn)性，可以傳入View.VISIBILE、View.INVISIBLE、View.GONE三個(gè)值

  • 通過(guò)style屬性來(lái)指定多種進(jìn)度條。
  • 通過(guò)android：max來(lái)指定progress的最大值。
  • 通過(guò)setProgress()和getProgress()方法來(lái)操作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，則無(wú)法使用Back鍵退出。當(dāng)數(shù)據(jù)加載完，必須調(diào)用progressDialog的dismiss()方法來(lái)關(guān)閉對(duì)話框。

3.3 詳解4種基本布局 P94

3.3.1 LinearLayout

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

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

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

    以下是規(guī)范寫(xiě)法：

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

3.3.2 RelativeLayout

1.相對(duì)父布局定位
android:layout_alignParentRight
android:layout_alignParentLeft
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_centerInParent
2.相對(duì)控件定位
android:layout_above
android:layout_below
android:layout_toRightOf
android:layout_toLeftOf
android:layout_alignLeft
android:layout_alignRight
android:layout_alignTop
android:layout_alignBottom

注意：當(dāng)一個(gè)控件引用另一個(gè)控件時(shí)，該控件一定要定義在另一個(gè)控件的后面,否則會(huì)出現(xiàn)找不到id的情況

3.3.3 FrameLayout

所有控件默認(rèn)擺放在布局的左上角。也可以使用android.layout_gravity屬性來(lái)指定控件在布局中的對(duì)齊方式。因?yàn)槎ㄎ环绞酱嬖谌毕?，所以使用?chǎng)景較少。

3.3.4 百分比布局

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

使用方法
  1. 打開(kāi)app/build.gradle文件，在dependencies閉包中添加百分比布局依賴(lài)。
compile 'com.android.support:percent:24.2.1'
  1. 在布局文件中，先寫(xiě)出最外層完整的包路。還要再定義一個(gè)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的前綴就是因?yàn)閯偛哦x了app的命名空間。我們能一直使用android前綴的屬性也是同樣的道理。

3.4 創(chuàng)建自定義控件 P109

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

3.4.1 引入布局

<include layout="layout/title"/>
  • android:padding規(guī)定控件與父View的距離；
  • android:layout_margin規(guī)定控件與其它（上下左右）View之間的距離。
如何隱藏系統(tǒng)自帶的標(biāo)題欄。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 創(chuàng)建自定義控件

  1. 創(chuàng)建自定義控件。先創(chuàng)建一個(gè)布局B(TitleLayout)的類(lèi),在該類(lèi)中加載3.4.1中創(chuàng)建的布局A（title），并將B設(shè)為A的父布局。再為其中的各個(gè)控件添加事件以及功能。
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中創(chuàng)建的布局A（title），并將B（TitleLayout）設(shè)為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);
通過(guò)LayoutInflaer的from()可以構(gòu)建出一個(gè)LayoutInflater對(duì)象，然后調(diào)用inflate()動(dòng)態(tài)加載一個(gè)布局文件。inflate()方法的第一個(gè)參數(shù)是要加載的布局文件的id，第二個(gè)參數(shù)是給加載好的布局再添加一個(gè)父布局，這里我們想要指定為T(mén)itileLayout，于是直接傳入this。
②((Activity)getContext()).finish();
其實(shí)就是從Activity傳了個(gè)Context過(guò)來(lái)，不過(guò)因?yàn)椴恢籄ctivity有Context，比如Service也有，所以加了個(gè)強(qiáng)制類(lèi)型轉(zhuǎn)化。而getContext()得到的是this，就相當(dāng)于this.finish()，其實(shí)一般我們?cè)贏ctivity里直接finish()是一種簡(jiǎn)寫(xiě)。

  1. 使用自定義控件。在布局C中，使用自定義控件的完整類(lèi)名（包名不可省略），就可添加該控件。
<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==:允許用戶(hù)通過(guò)手指上下滑動(dòng)的方式，將屏幕外的數(shù)據(jù)滾動(dòng)到屏幕內(nèi)，同時(shí)屏幕上原有的數(shù)據(jù)會(huì)滾動(dòng)到屏幕外。

3.5.1 ListView的簡(jiǎn)單用法

  1. 添加控件
<ListView
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
  1. 新建一個(gè)Adapter，將context、子項(xiàng)（Item）的樣式和data傳入進(jìn)去。

數(shù)組中的數(shù)據(jù)無(wú)法直接傳遞給ListView，需要借助適配器。ArrayAdapter可以通過(guò)泛型來(lái)指定要匹配的數(shù)據(jù)類(lèi)型。

  1. 調(diào)用setAdapter()為L(zhǎng)istView添加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的界面

  1. 新建一個(gè)Fruit類(lèi)
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;
    }
}
  1. 新建一個(gè)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.新建一個(gè)FruitAdapter類(lèi)

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自動(dòng)生成的返回值，但是在這個(gè)例子中運(yùn)行會(huì)報(bào)錯(cuò)
    }
}

①getView()在每一個(gè)子項(xiàng)被滾動(dòng)到屏幕內(nèi)時(shí)會(huì)被調(diào)用。
②LayoutInflater.from(getContext()).inflate(resourceid,parent,false);第三個(gè)參數(shù)指定為false，表示只讓我們?cè)诟覆季种新暶鞯膌ayout屬性生效，但不為view添加父布局。因?yàn)橐坏﹙iew有了父布局之后，它就不能添加到ListView中了。

  1. 將context、fruit_item布局和數(shù)據(jù)傳入FruitAdapter，調(diào)用setAdapter()為L(zhǎng)istView添加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的運(yùn)行效率

  • 每次調(diào)用getView()時(shí)都會(huì)加載一遍布局，影響效率。
    解決方法：convertView參數(shù)可以將加載的布局進(jìn)行緩存，以便之后可以重用。
  • 每次調(diào)用getView()時(shí)都會(huì)獲取一次控件的實(shí)例，影響效率。
    解決方法：新建一個(gè)ViewHolder類(lèi)來(lái)緩存控件實(shí)例。
    @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的點(diǎn)擊事件

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內(nèi)部使用。
Fruit fruit = fruitList.get(position);則是在聲明fruitList的那個(gè)類(lèi)中使用，這里也就是Main3Activity。

3.6 ListView的增強(qiáng)版RecyclerView

ListView的布局排列是自身管理的，而RecyclerView則是把這個(gè)工作交給了LayoutManager。LayoutManager制定了一套可拓展的布局排列接口，子類(lèi)只要按照接口的規(guī)范來(lái)實(shí)現(xiàn)，就能制定出不同排列方式的布局了。

3.6.1 RecyclerView的基本用法

  1. 打開(kāi)app/build.gradle文件，在dependenceies閉包中添加遠(yuǎn)程依賴(lài)：
compile 'com.android.support:recyclerview-v7:24.2.1'
  1. 在布局文件中，用完整的包路徑添加RecyclerView：
<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. 新建RecyclerViewAdapter類(lèi)：
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()用于加載子項(xiàng)（item）布局，創(chuàng)建ViewHolder實(shí)例，將布局中的控件實(shí)例緩存到ViewHolder中。
  • onBindViewHolder()用于為ViewHolder中的實(shí)例設(shè)置屬性。
  • gerItemCount()用于返回RecyclerView中item的數(shù)量。

  1. 創(chuàng)建RecyclerViewAdapter的實(shí)例，并將context、item布局、data傳遞進(jìn)去。

  2. 為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是線性布局，可以實(shí)現(xiàn)和ListView類(lèi)似的效果。

3.6.2 實(shí)現(xiàn)橫向滾動(dòng)和瀑布流

實(shí)現(xiàn)橫向滾動(dòng)

  1. 修改item布局。LinearLayout改成垂直方向排列，使其適合橫向滾動(dòng)要求。

  2. 在[3.6.1](#3.6.1 RecyclerView的基本用法)的基礎(chǔ)上,調(diào)用LinearLayout的setOrientation()來(lái)設(shè)置布局的排列方向，默認(rèn)是縱向排列

layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
實(shí)現(xiàn)瀑布流

  1. 修改item布局。LinearLayout的寬度改為match_parent，因?yàn)槠俨剂鞑季种衖tem的寬度是根據(jù)布局的列數(shù)自動(dòng)適配的，不是一個(gè)固定值。

  2. LinearLayoutManager改為StaggeredGridLayoutManager。StaggeredGridLayoutManager()的第一個(gè)參數(shù)用于指定布局的列數(shù)，第二個(gè)參數(shù)用于指定布局的排列方向。

    StaggeredGridLayoutManager layoutManager = new
                StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);

同理實(shí)現(xiàn)網(wǎng)格布局也只需要將LinearLayoutManager改為GridLayoutManager。GridLayoutManager()的第一個(gè)參數(shù)是context，第二個(gè)是網(wǎng)格列數(shù)（spanCount）。

3.6.3 RecyclerView的點(diǎn)擊事件

ListView的點(diǎn)擊事件是對(duì)整個(gè)子項(xiàng)（item）注冊(cè)了點(diǎn)擊監(jiān)聽(tīng)器，而RecyclerView為了能對(duì)item中的所有view添加監(jiān)聽(tīng)器，舍棄了子項(xiàng)點(diǎn)擊事件的監(jiān)聽(tīng)器，所有的點(diǎn)擊事件都由具體的View去注冊(cè)。

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

    static class ViewHolder extends RecyclerView.ViewHolder{
        View fruitView;//添加了子項(xiàng)的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分別注冊(cè)了點(diǎn)擊監(jiān)聽(tīng)器
        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 編寫(xiě)界面的最佳實(shí)踐

3.7.1 制作Nine-Patch圖片 P133

3.7.2 編寫(xiě)精美的聊天界面

  1. 創(chuàng)建一個(gè)message類(lèi)、msg_item.xml、MsgRecyclerViewAdapter類(lèi)
  2. 新建一個(gè)MainActivity，在布局中添加RecyclerView、Button、EditText。
  3. 在MainActivity中使用RecyclerView。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容