<第一行代码>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对象常用的方法

//返回当前进度
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里有几个控件就代表有几列.如果某一行的某一列需要拉伸,则需要使用android:stretchColumns="n"这个属性来指定拉伸第n-1行

3. 自定义控件

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

引入布局

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

自定义控件

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

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提供数据

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

定制ListView的界面

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

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

private int resourseId;

public FruitAdapter (Context context, int textViewResourseId, List 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

然后需要一个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要展示内容的布局

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

public class MsgAdapter extends ArrayAdapter{
private int resourceId;

public MsgAdapter(Context context,int textViewResourceId,List 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 msgList = new ArrayList();
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,还有很多的东西需要去了解,这里涉及到的控件的知识还很基础,坚持下去.