<第一行代码>chapter 3

第三章的内容有以下几点:

常用控件
四种基本布局
自定义控件
ListView
单位和尺寸
实践

1. 常用控件

TextView,Button,EditText,ImageView,AlertDialog,ProgressDialog,ProgressBar

不一一说明了.

AlertDialog

AlertDialog可以在当前界面弹出一个对话框,一般用于提示一些非常重要的内容或者警告的信息,下面是一个简单示例:

//实例化一个AlertDialog的builder
AlertDialog.Builder builder = new AlertDialog.Builder(context);
//设置标题和信息
builder.setMessage(R.string.dialog_message)
      .setTitle(R.string.dialog_title);
//点击确认按钮的逻辑
builder.setPositiveButton(R.string.ok, new DialogInterface.OnClickListener() {
       public void onClick(DialogInterface dialog, int id) {
           // User clicked OK button
       }
   });
//点击取消按钮的逻辑
builder.setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
       public void onClick(DialogInterface dialog, int id) {
           // User cancelled the dialog
       }
   });
//获取dialog实例
AlertDialog dialog = builder.create();
//显示dialog
dialog.show();

2.ProgressBar

ProgressBar用于在界面上显示一个进度条,继承自View类.官方指南中指出应尽量避免使用ProgressDialog.记录一些跟ProgressBar有关系的属性与方法.

style表明样式,默认是圆形进度条 max表示最大进度值

<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"/>

ProgressBar对象常用的方法

//返回当前进度
int progress = progressBar.getProgress();
//设置进度
progressBar.setProgress(29);

2. 四种基本布局

LinearLayout

线性布局,布局里的控件会在水平方向上依次排列.涉及到的属性有下面几种:

//排列方向水平
android:orientation="horizontal"
//排列方向垂直
android:orientation="vertical"
//控件在布局中的排列方式 center top ...
android:layout_gravity="center"
/*按比例显示控件的大小,控件的宽度设置为0dp,宽度系统会自动计算weight的和,按照比例给控件分配
屏幕大小*/
android:layout_weight="1"

RelativeLayout

相对布局.相对于线性布局来说,RelativeLayout涉及的属性很多,但是理解起来很简单,写几个小例子就很清楚了.

//alignParent代表相对于父布局的位置,此外还有centerInparent代表在父布局中间,相对于控件就使用
//toRightOf,above,below这样的方向来表示
android:layout_alignParentLeft="true"
android:layout_centerInparent="true"
android:layout_above="@id/text"
//还有一组表示对齐的属性
android:layout_alignLeft="@id/text"

FrameLayout

FrameLayou在本章没有介绍太多,下章会详细记录
TableLayout

顾名思义,表格布局,表格里一定要有行和列咯,而<TableRow>标签就代表了一个列,也算是一个容器,但是在TableRow里的控件是无法设置宽度的.每一个TableRow就代表一行,每个TableRow里有几个控件就代表有几列.如果某一行的某一列需要拉伸,则需要使用android:stretchColumns="n"这个属性来指定拉伸第n-1行

    <TableRow>
            <TextView
                android:layout_height="wrap_content"
                android:text="Account:"/>
            <EditText
                android:id="@+id/account"
                android:layout_height="wrap_content"
                android:hint="Tel or Email."/>
     </TableRow>

3. 自定义控件

自定义控件在这里只提到了很简单的部分.

引入布局

自定义一个xml文件,然后可以在其他布局文件中包含

 <include layout="@layout/your_layout" />

自定义控件

自定义一个控件类继承自要实现的控件,在这个类里对控件里的操作逻辑进行实现,这样调用的时候就不用重复的去写实现办法了.

public class TitleLayout extends LinearLayout {
public TitleLayout(Context context,AttributeSet attrs){
    super(context, attrs);
    LayoutInflater.from(context).inflate(R.layout.title, this);
    Button back = (Button) findViewById(R.id.title_back);
    Button edit = (Button) findViewById(R.id.title_edit);
    back.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            ( (Activity) getContext()).finish();
        }
    });
}
}

4. ListView的初级使用

ListView是最常用的控件之一,用法也比较复杂多样,因为是最常用的展示内容的控件,所以更应该仔细琢磨.

ListView的基础用法

在layout文件中添加ListView控件

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

为ListView提供数据

ArrayAdapeter<String> adapter = new ArrayAdapeter<String>(MainActivity.this,
      android.R.layout.simple_list_item_1,data);
ListView listView = (ListView) findViewById(R.id.list_view);
listView.setAdapter(adapter);

定制ListView的界面

我们需要自定义一个列表显示方式,这里采用一个线性布局,采用一个Text加一个Image的简单样例

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

<ImageView
    android:id="@+id/fruit_image"
    android:layout_weight="2"
    android:layout_width="20dp"
    android:layout_height="20dp"/>

<TextView
    android:id="@+id/fruit_name"
    android:layout_weight="8"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="10dip"/>
</LinearLayout>

然后自定义Adapter继承自ArrayAdapter,重写构造方法和getView()方法

private int resourseId;

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


@Override
public View getView (int position, View convertView, ViewGroup parent) {
  Fruit fruit = getItem(position);
  View view = LayoutInflater.from(getContext() ).inflate(resourseId,null);

  //将数据表示在控件上

  return view;
}

像调用ArrayAdapter那样调用自定义的Adapter

//data里包含text,image的数据
FruitAdapter adapter = new FruitAdapter(MainActivity.this,R.layout.fruit_item,data);
listView.setAdaoter(adapter);

运行效率的问题

getView()方法中每次都把布局重新加载了一遍,这样很消耗资源,使得滑动效率很低,而其中的converView参数,可以将之前加载好的布局进行缓存,以便重用,而每次还需要获取控件的实现,所以可以采用下面的办法解决这个问题:

@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(resourseId,null);
    viewHolder = new ViewHolder();
    viewHolder.fruitImage = (ImageView) view.findViewById(R.id.fruit_image);
    viewHolder.fruitName = (TextView) view.findViewById(R.id.fruit_name);
 //存储viewHolder到view中
    view.setTag(viewHolder);
}else {
    view = convertView;
 //从view中获取viewHolder实例
    viewHolder = (ViewHolder) view.getTag();
}

viewHolder.fruitImage.setImageResource(fruit.getImageId());
viewHolder.fruitName.setText(fruit.getName());
return view;
}
//新建内部类来存储控件实例
class ViewHolder{
ImageView fruitImage;
TextView fruitName;
}

ListView的点击事件

//只需要调用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(MainActivity.this,fruit.getName(),Toast.LENGTH_SHORT).show();
        }
    });

5. 单位和尺寸

需要记住的就是

尽量将控件或者布局的大小指定成match_parent或者wrap_content,如果使用固定值,使用dp来作为单位,指定文字大小的时候使用sp作为单位.

6. 最佳实践

Nine-Patch图片的制作

Nine-Patch图片可以指定拉伸的区域,使得图片在被拉伸的时候按照预定的方式变形,使用sdk\tools里面的draw9patch.bat来进行制作,android studio也集成了制作的工具.

Android Studio的工具

编写一个聊天界面

要实现的界面

首先分析,底部需要水平方向上的线性布局包含一个EditText,和一个Button

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<EditText
    android:id="@+id/input_text"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="input"
    android:maxLines="2"/>
<Button
    android:id="@+id/send_msg"
    android:text="Send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
  </LinearLayout>

然后需要一个ListView来放我们的消息列表,

<ListView
    android:id="@+id/msg_list_view"
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:divider="#0000">
</ListView>

定义一个消息的实体类,这里消息分两类,一类是发送的,一类是接收

public class Msg {
 public static final int TYPE_RECEIVED = 0;
 public static final int TYPE_SENT = 1;

 private String content;
 private int type;

 public Msg(String content,int type){
      this.content = content;
      this.type = type;
    }

    public String getContent() {
      return content;
    }

    public int getType() {
      return type;
    }
}

接下来是ListView要展示内容的布局

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">

  <LinearLayout
      android:id="@+id/left_layout"
      android:layout_gravity="start"
      android:background="@drawable/message_left"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

      <TextView
          android:id="@+id/left_msg"
          android:layout_gravity="center"
          android:layout_margin="10dp"
          android:textColor="#ff0000"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

  </LinearLayout>

  <LinearLayout
      android:id="@+id/right_layout"
      android:layout_gravity="end"
      android:background="@drawable/message_right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

      <TextView
          android:id="@+id/right_msg"
          android:layout_gravity="center"
          android:layout_margin="10dp"
          android:textColor="#ff0000"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />

  </LinearLayout>

</LinearLayout>

接下来就是轻车熟路的自定义Adapter了,新建MsgAdapter

public class MsgAdapter extends ArrayAdapter<Msg>{
private int resourceId;

public MsgAdapter(Context context,int textViewResourceId,List<Msg> msgList){
    super(context,textViewResourceId,msgList);
    this.resourceId = textViewResourceId;
}

@Override
public View getView(int position,View convertView,ViewGroup parent){
    Msg msg = getItem(position);
    View view;
    ViewHolder viewHolder;
    if(convertView == null){
        view = LayoutInflater.from(getContext()).inflate(resourceId,null);
        viewHolder = new ViewHolder();
        viewHolder.leftLayout = (LinearLayout) view.findViewById(R.id.left_layout);
        viewHolder.rightLayout = (LinearLayout) view.findViewById(R.id.right_layout);

        viewHolder.leftMsg = (TextView) view.findViewById(R.id.left_msg);
        viewHolder.rightMsg = (TextView) view.findViewById(R.id.right_msg);

        view.setTag(viewHolder);
    }else {
        view = convertView;
        viewHolder = (ViewHolder) view.getTag();
    }
    //判断是收到还是发出的消息,决定显示左布局还是右布局
    if(msg.getType() == msg.TYPE_RECEIVED){
        viewHolder.leftLayout.setVisibility(View.VISIBLE);
        viewHolder.rightLayout.setVisibility(View.INVISIBLE);
        viewHolder.leftMsg.setText(msg.getContent());
    }else if(msg.getType() == msg.TYPE_SENT){
        viewHolder.rightLayout.setVisibility(View.VISIBLE);
        viewHolder.leftLayout.setVisibility(View.INVISIBLE);
        viewHolder.rightMsg.setText(msg.getContent());
    }
    return view;
}

private class ViewHolder{
    LinearLayout leftLayout;
    LinearLayout rightLayout;

    TextView leftMsg;
    TextView rightMsg;
}
}

最后在活动中

public class MainActivity extends AppCompatActivity {

private List<Msg> msgList = new ArrayList<Msg>();
private ListView listView;
private EditText inputText;
private Button button_send;
private MsgAdapter msgAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);
    initMsg();
    msgAdapter = new MsgAdapter(MainActivity.this,R.layout.msg_item,msgList);
    inputText = (EditText) findViewById(R.id.input_text);
    button_send = (Button) findViewById(R.id.send_msg);
    listView = (ListView) findViewById(R.id.msg_list_view);
    listView.setAdapter(msgAdapter);

    button_send.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String content = inputText.getText().toString();
            if(!"".equals(content)){
                Msg msg = new Msg(content, Msg.TYPE_SENT);
                msgList.add(msg);
                //通知列表的数据发生了变化,使得最新的消息可以显示
                msgAdapter.notifyDataSetChanged();
                //将listView显示的数据定义到最后一行
                listView.setSelection(msgList.size());
                inputText.setText("");
            }
        }
    });
}

private void initMsg(){
    Msg msg1 = new Msg("Hello",Msg.TYPE_RECEIVED);
    msgList.add(msg1);
    Msg msg2 = new Msg("Hello who is it",Msg.TYPE_SENT);
    msgList.add(msg2);
    Msg msg3 = new Msg("It's jim",Msg.TYPE_RECEIVED);
    msgList.add(msg3);
}
}

7. 总结

UI开发其实学起来比较轻松,可能控件的属性不是很好记忆,但是理解了或者多试一试使用起来还不是很难.ListView是个大Boss,还有很多的东西需要去了解,这里涉及到的控件的知识还很基础,坚持下去.

最后编辑于：2017.12.03 03:24:55

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,560评论 4赞 361
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,104评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,297评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,869评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,275评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,563评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,833评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,543评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,245评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,512评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,011评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,359评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,006评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,062评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,825评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,590评论 2赞 273
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,501评论 2赞 268