Day3 UI:7种常用控件、4种基本布局

Android常用控件

TextView

<TextView
    android:id="@+id/text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"  //top、bottom、left、right、center等 可以用'|'来同时指定多个值
    android:textSize="24sp"   //文字大小
    android:textColor="#00ff00" //文字颜色
    android:text="This is TextView"/>

更多细节可以查阅官方文档

https://developer.android.com/reference/android/widget/TextView.html

Button

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:textAllCaps="false" //禁用按钮的默认大写功能/>

在Activity中为Button的点击注册一个监听器：

    Button button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            //在此处添加逻辑
        }
    });

EditText

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here" //提示文字
        />

Button与EditText完成一些功能，在Activity中添加：

private EditText editText;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button button = (Button) findViewById(R.id.button);
    editText = (EditText) findViewById(R.id.edit_text);
    button.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            String inputText = editText.getText().toString(); //读取字符串
            Toast.makeText(MainActivity.this, inputText, Toast.LENGTH_SHORT).show(); //输出字符串

ImageView

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_1"
        />

通过在Activity中动态修改图片：

private ImageView imageView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button button = (Button) findViewById(R.id.button);
    imageView = (ImageView) findViewById(R.id.image_view);
    button.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            imageView.setImageResource(R.drawable.img_2); //更改图片的src
        }
    });
}

ProgressBar

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

所有的Android控件都有一个属性用于设置可见性android:visibility

可选值有visible、invisible、gone其默认值为visibile，gone表示控件不可见且不占用任何屏幕空间。可以通过代码控制可见性，使用setVisibility()方法，可以传入View.VISIBLE、View.INVISIBLE、View.GONE这3种值。

private ProgressBar progressBar;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    progressBar = (ProgressBar)findViewById(R.id.progress_bar);
    button.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            if(progressBar.getVisibility() == View.GONE) //用getVisibility()方法获取可见性
                progressBar.setVisibility(View.VISIBLE);
            else
                progressBar.setVisibility(View.GONE);
        }
    });
}

改为水平进度条：在xml中添加

style="?android:attr/progressBarStyleHorizontal"
android:max="100"

在代码中控制进度条

    @Override
    public void onClick(View v) {
        int progress=progressBar.getProgress();
        progress=progress+10;
        progressBar.setProgress(progress);

AlertDialog

AlertDialog和ProgressDialog都可以屏蔽掉其他控件的交互能力

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Button button = (Button) findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            //通过AlertDialog.Builder创建一个AlertDialog实例
            AlertDialog.Builder dialog=new AlertDialog.Builder(MainActivity.this);
            //设置标题
            dialog.setTitle("Oh!");
            //设置内容
            dialog.setMessage("Are u fucking sure you want to do this?");
            //可否取消（即可否不操作就退出）
            dialog.setCancelable(false);
            //设置按钮
            dialog.setPositiveButton("Sure", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {

                }
            });
            //设置取消按钮
            dialog.setNegativeButton("Cancle", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {

                }
            });
            dialog.show();
        }
    });
}

ProgressDialog

    @Override
    public void onClick(View v) {
        ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
        progressDialog.setTitle("This is ProgressDialog");
        progressDialog.setMessage("Loading...");
        progressDialog.setCancelable(true);
        progressDialog.show();
    }

---

详解四种基本布局

线性布局LinearLayout

设置控件水平排列还是垂直排列：

android:orientation="vertical" //vertical是垂直排列，horizontal是水平排列

将宽度设置为0dp，用weight来指定所占比例（dp是指定控件大小、间距等属性的单位）

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

仅指定EditText的weight属性，并将Button的宽度改回wrap_content会使适配方面会非常好，而且看起来也更加舒服。

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type something"
        />

    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"
        />

相对布局RelativeLayout

RelativeLayout可以通过相对定位的方式让控件出现在布局的任何位置，因此，RelativeLayout中的属性非常多，不过这些属性都是有规律可循的，其实并不难理解和记忆。

<Button
    android:layout_centerInParent="true"    //居中
    android:layout_alignParentLeft="true"   //居左
    android:layout_alignParentRight="true"  //居右
    android:layout_alignParentTop="true"    //居上
    android:layout_alignParentBottom="true" //局下
    />
...

上面例子中都是相对于父布局进行定位的，相对于控件定位：

<Button
    android:layout_above="@id/button3"      //位于b3的上方
    android:layout_toLeftOf="@id/button3"
    android:layout_below="@id/button3"
    android:layout_toRightOf="@id/button3"
    android:layout_alignRight="@id/button3" //位于b3的右边
    android:layout_alignLeft="@id/button3"
    android:layout_alignTop="@id/button3"
    android:layout_alignBottom="@id/button3"
    />
...

需要注意的是，当一个控件去引用另一个控件的id时，该控件一定要定义在引用空间的后面，不然会出现找不到id的情况。

帧布局FrameLayout

该布局所有控件都会默认摆放在布局的左上角，后定义的控件会放在先定义的上方，也可以使用像LinearLayout中的android:layout_gravity属性来指定控件的对其方式。

由于FrameLayout定位方式的欠缺，导致它的应用场景也比较少，下一章中介绍碎片的时候我们还是可以用到它的。

百分比布局PercentFrameLayout/PercentRelativeLayout

由于只有LinearLayout支持使用layout_weight属性来实现比例控制大小的功能，其他两种布局都不支持，才引入了百分比布局。

使用前要在build.gradle中添加百分比布局库的依赖

打开app/build.gradle文件，在dependencies闭包中添加：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    //添加这一行↓
    compile 'com.android.support:percent:24.2.1'
    testCompile 'junit:junit:4.12'
}

然后点击Sync Now即可把新添加的百分比布局库引入到项目当中。

<android.support.percent.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:text="Button 1"
        android:layout_gravity="left|top"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        />

</android.support.percent.PercentFrameLayout>

PercentFrameLayout继承了FrameLayout的特性，所以要用layout_gravity设置位置。

PercentRelativeLayout的用法也是非常相似的，它继承了RelativeLayout中的所有属性，并且可以设置宽高比例，其实Android还有AbsoluteLayout、TableLayout等布局，但使用得实在是太少了，就不讲解了。