第二章 UI
標(biāo)簽（空格分隔）： 未分類
疑問
- 3.5.2黔牵，inflate()的第三個(gè)參數(shù)false是起什么作用啡浊？為什么不添加父布局陶耍？[定位](#3.5.2 定制ListView的界面)
- 能否寫出通用的RecyclerViewAdapter和ViewHolder赏陵？
知識(shí)結(jié)構(gòu)
3.2 常用控件/組件的使用方法 P77
3.2.1 TextView
- 文字默認(rèn)為居左上角對(duì)齊屑柔，通過
android:gravity來指定文字的對(duì)齊方式沉帮。 - 對(duì)控件的高和寬指定固定值會(huì)造成適配的問題锈死。
3.2.2 Button
- 系統(tǒng)會(huì)對(duì)Button中的所有英文字母自動(dòng)進(jìn)行大寫轉(zhuǎn)換，可以通過
android：textAllCaps="false"來禁止穆壕。 - 為點(diǎn)擊事件注冊(cè)監(jiān)聽器的方法：①匿名類待牵；②實(shí)現(xiàn)接口。實(shí)現(xiàn)接口喇勋，可以集中管理點(diǎn)擊事件的邏輯缨该。
3.2.3 EditText
- 使用
android：hint屬性來指定一段提示性文字。 - 使用
android：maxLines屬性來指定EditText的最大行數(shù)川背，避免EditText過分拉長(zhǎng)贰拿。
3.2.4 ImageView
圖片通常都存放在以“drawable”開頭的不同分辨率的目錄下。
- 使用
android：src屬性來指定圖片的地址熄云。 - 使用
setImageResource()來改變顯示的圖片膨更。
3.2.5 ProgressBar
Android所有控件均有可見屬性，可通過
android：visibility屬性進(jìn)行指定皱碘，它有三個(gè)取值询一，visible、invisible癌椿、gone健蕊。還可以通過setVisibility()方法來設(shè)置可見性，可以傳入View.VISIBILE踢俄、View.INVISIBLE缩功、View.GONE三個(gè)值
- 通過
style屬性來指定多種進(jìn)度條。 - 通過
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鍵退出势木。當(dāng)數(shù)據(jù)加載完蛛倦，必須調(diào)用progressDialog的dismiss()方法來關(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屬性允許使用比例的方式來指定控件的大小。只有在LinearLayout中才可以使用這個(gè)屬性端幼。以下是規(guī)范寫法：
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屬性來指定控件在布局中的對(duì)齊方式静暂。因?yàn)槎ㄎ环绞酱嬖谌毕荩允褂脠?chǎng)景較少谱秽。
3.3.4 百分比布局
只有在LinearLayout中才可以使用android.layout_weight屬性洽蛀。為了能夠按比例指定控件大小，百分比布局為RelativeLayout疟赊、FrameLayout提供了PercentRelativeLayout郊供、PercentFrameLayout兩個(gè)全新的布局。
使用方法
- 打開
app/build.gradle文件近哟，在dependencies閉包中添加百分比布局依賴驮审。
compile 'com.android.support:percent:24.2.1'
- 在布局文件中，先寫出最外層完整的包路吉执。還要再定義一個(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)建自定義控件
- 創(chuàng)建自定義控件睬澡。先創(chuàng)建一個(gè)布局B(TitleLayout)的類,在該類中加載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);
通過LayoutInflaer的from()可以構(gòu)建出一個(gè)LayoutInflater對(duì)象逝慧，然后調(diào)用inflate()動(dòng)態(tài)加載一個(gè)布局文件昔脯。inflate()方法的第一個(gè)參數(shù)是要加載的布局文件的id，第二個(gè)參數(shù)是給加載好的布局再添加一個(gè)父布局笛臣，這里我們想要指定為TitileLayout云稚，于是直接傳入this。
②((Activity)getContext()).finish();
其實(shí)就是從Activity傳了個(gè)Context過來沈堡，不過因?yàn)椴恢籄ctivity有Context静陈，比如Service也有，所以加了個(gè)強(qiáng)制類型轉(zhuǎn)化诞丽。而getContext()得到的是this鲸拥，就相當(dāng)于this.finish()，其實(shí)一般我們?cè)贏ctivity里直接finish()是一種簡(jiǎn)寫僧免。
- 使用自定義控件刑赶。在布局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==:允許用戶通過手指上下滑動(dòng)的方式，將屏幕外的數(shù)據(jù)滾動(dòng)到屏幕內(nèi)浊洞，同時(shí)屏幕上原有的數(shù)據(jù)會(huì)滾動(dòng)到屏幕外牵敷。
3.5.1 ListView的簡(jiǎn)單用法
- 添加控件
<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
- 新建一個(gè)Adapter，將context沛申、子項(xiàng)（Item）的樣式和data傳入進(jìn)去劣领。
數(shù)組中的數(shù)據(jù)無法直接傳遞給ListView，需要借助適配器铁材。ArrayAdapter可以通過泛型來指定要匹配的數(shù)據(jù)類型尖淘。
- 調(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的界面
- 新建一個(gè)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;
}
}
- 新建一個(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類
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中了辽话。
- 將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類來緩存控件實(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è)類中使用裆甩，這里也就是Main3Activity冗锁。
3.6 ListView的增強(qiáng)版RecyclerView
ListView的布局排列是自身管理的，而RecyclerView則是把這個(gè)工作交給了LayoutManager嗤栓。LayoutManager制定了一套可拓展的布局排列接口冻河，子類只要按照接口的規(guī)范來實(shí)現(xiàn)，就能制定出不同排列方式的布局了茉帅。
3.6.1 RecyclerView的基本用法
- 打開app/build.gradle文件芋绸，在dependenceies閉包中添加遠(yuǎn)程依賴：
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()用于加載子項(xiàng)（item）布局担敌，創(chuàng)建ViewHolder實(shí)例，將布局中的控件實(shí)例緩存到ViewHolder中廷蓉。
- onBindViewHolder()用于為ViewHolder中的實(shí)例設(shè)置屬性全封。
- gerItemCount()用于返回RecyclerView中item的數(shù)量。
創(chuàng)建RecyclerViewAdapter的實(shí)例桃犬，并將context刹悴、item布局、data傳遞進(jìn)去攒暇。
-
為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類似的效果就轧。
3.6.2 實(shí)現(xiàn)橫向滾動(dòng)和瀑布流
實(shí)現(xiàn)橫向滾動(dòng)
修改item布局证杭。LinearLayout改成垂直方向排列，使其適合橫向滾動(dòng)要求妒御。
在[3.6.1](#3.6.1 RecyclerView的基本用法)的基礎(chǔ)上,調(diào)用LinearLayout的setOrientation()來設(shè)置布局的排列方向解愤，默認(rèn)是縱向排列
layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
實(shí)現(xiàn)瀑布流
修改item布局。LinearLayout的寬度改為match_parent乎莉，因?yàn)槠俨剂鞑季种衖tem的寬度是根據(jù)布局的列數(shù)自動(dòng)適配的送讲，不是一個(gè)固定值。
-
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)聽器存筏，而RecyclerView為了能對(duì)item中的所有view添加監(jiān)聽器宠互，舍棄了子項(xiàng)點(diǎn)擊事件的監(jiān)聽器，所有的點(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)聽器
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 編寫界面的最佳實(shí)踐
3.7.1 制作Nine-Patch圖片 P133
3.7.2 編寫精美的聊天界面
- 創(chuàng)建一個(gè)message類予跌、msg_item.xml、MsgRecyclerViewAdapter類
- 新建一個(gè)MainActivity善茎，在布局中添加RecyclerView券册、Button、EditText垂涯。
- 在MainActivity中使用RecyclerView烁焙。
