Android学习随笔(5)------常用基础控件

学习流程来自《第一行代码》(第二版)

常用的基础控件

TextView

用于在界面上显示一段文本信息

<TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#00ff00"
        android:textSize="24sp"
        android:text="This is a TextView" />

id :唯一标识符
android:layout_width :控件的宽
android:layout_height :控件的高
match_parent :让当前控件大小和父布局大小一样
fill_parent :同上
wrap_content :当前控件大小刚好包含住里面的内容
android:gravity :控件文字的对齐方式
android:textColor :控件内文本颜色
android:textSize :控件内文本大小

Button

按钮是一个交互过程中十分重要的一个控件。

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:textAllCaps="false" />

android:textAllCaps=”false”(是否进行大小写的自动转换) 去掉此属性会发现text属性中的所有字母被默认大写了。

同java差不多点击按钮的事件是需要监听的。

Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(this);
button.onClickListeners(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // 此处添加逻辑代码
    }
});    // 匿名类方法注册监听器

匿名类监听对象只会被创建一次。

Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(this);
button.onClickListeners(new View.OnClickListener() {
    int a = 0;
    @Override
    public void onClick(View view) {
        a++;
        Log.d("admin",a);
    }
});    // 匿名类方法注册监听器

在这里log输出并不是每次都是1，而是依次累加。

private ImageView imageView = null;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button)findViewById(R.id.button);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.button:
                // 此处添加逻辑代码
                back;
            default:
        }    // 实现接口方式注册
    }
}

EditText

允许用户在控件里输入和编辑内容。

    <EditText
        android:id="@+id/edit_text"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:hint="Type something here"
        android:maxLines="2"
        />
    <!--
        hint:编辑框初始显示的提示文字
        maxLines:最大行数，多出内容会向上滚动
    -->

ImageView

这时一个显示图片的控件，需要先准备好一张图片,放在res下以”drawable”开头的目录中，我们新建一个drawable-xhdpi，”-“后跟的是分辨率。

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

android:src 就是图片所在的路径

实现点击button切换图片:

    private EditText editText = null;
    private ImageView imageView = null;
    private int flag = 1;

    @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);
        imageView = (ImageView)findViewById(R.id.image_view);
        button.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.button:
                String inputText = editText.getText().toString();    // 显示edittext的string                Toast.makeText(MainActivity.this,inputText,Toast.LENGTH_SHORT).show();
                if (flag == 1) {    // 图片切换（如何实现两图相互切换）
                    imageView.setImageResource(R.drawable.imp_2);    
                    flag = 2;
                } else {
                    imageView.setImageResource(R.drawable.imp_1);
                    flag = 1;
                }
                break;
            default:
        }    // 实现接口方式注册

    }

因为还不熟悉所以目前是立了一个flag来记录当前图片，点击就进行判断，然后做出相应的切换。

ProgressBar

用于在界面上显示一个进度条。

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

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.button:
                if(progressBar.getVisibility() == View.GONE)
                    progressBar.setVisibility(View.VISIBLE);
                else
                    progressBar.setVisibility(View.GONE);    // 点击显示/隐藏进度条
                break;
            default:
        }    // 实现接口方式注册
    }

每一个控件都有一个android:visibility这个属性，它有三个值
visible :可见
invisible :控件不可见，但仍然占据着原来的位置大小
gone :不可见且不占用屏幕空间

用代码控制setVisibility()方法，View.VISIBILE，View.INVISIBLE , View.GONE。上面的代码实现的就是点击一下按钮利用getVisibile()方法来获取控件的显示情况，并根据判断显示/隐藏进度条。
通过设置style属性可以将它指定为水平进度条

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

    int progress = progressBar.getProgress();
    progress = progress + 10;
    progressBar.setProgress(progress);    // 设置进度条进度

每点击一次就把进度条进度加10

AlertDialog

在当前的界面弹出一个对话框。

在button的事件监听中添加代码 :

AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);    // 弹出一个警告框
dialog.setTitle("This is Dialog");
dialog.setMessage("Something important.");
dialog.setCancelable(false);
dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialogInterface, int i) {
        Log.d("admin","click one");
    }
});
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog,int which) {
        Log.d("admin","click two");
    }
});
dialog.show();

ProgressDialog

在对话框中显示一个进度条

ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);    // 弹出一个进度对话框
progressDialog.setTitle("This is a ProgressDialog");
progressDialog.setMessage("Loading....");
progressDialog.setCancelable(true);    // 如果为false则不可以被back取消 要dismiss来关闭这个对话框
progressDialog.show();

利用多线程加载进度条 :

public class MainActivity extends AppCompatActivity {

    Button showDialog;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        showDialog = (Button) findViewById(R.id.show);
        showDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final ProgressDialog dialog = new ProgressDialog(MainActivity.this);
                dialog.setTitle("Wait");
                dialog.setMessage("正在下载。。。");
                dialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);    // 进度条样式
                dialog.setMax(100);
                dialog.show();

                new Thread(new Runnable() {

                    int temp = 0;

                    @Override
                    public void run() {
                        while (temp < dialog.getMax()) {
                            dialog.setProgress(temp += 25);
                            try {
                                Thread.sleep(1000);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                        dialog.dismiss();    // 消失
                    }
                }).start();
            }
        });

    }
}

layout :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Show Dialog" />

</LinearLayout>

布局

Android的四种基本布局。
一个应用不仅可以只用一种布局方式，还可以进行布局之间的嵌套。

线性布局

LinearLayout

在LinearLayout标签中有一个android:orientation属性
当它为vertical时

可以看到button都是在垂直方向上从左上角开始呈线性显示的。
当它为horizontal时

这也是orientaion这个属性的默认值。
还可以通过android:layout_gravity对控件的位置进行设置

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

    <Button
    android:id="@+id/button_1"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="top"
    android:text="Button1"
    android:textAllCaps="false"
    />
    <Button
    android:id="@+id/button_2"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="center"
    android:text="Button2"
    android:textAllCaps="false"
    />
    <Button
    android:id="@+id/button_3"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="right"
    android:text="Button3"
    android:textAllCaps="false"
    />    <!--android:layout_gravity 指定空间在布局中的对齐方式-->

虽然设置但可以明确的看到，其实是逃不开LinearLayout的设置的，它是在线性布局的基础上再进行对水平的设置。

而LinearLayout设置为horizontal的情况下，控件可以控制自己在垂直位置上的距离。

在线性布局中还有一个重要的属性，android:layout_weight。
当前控件在此位置占的权重。

<EditText
    android:id="@+id/input_message"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
    <Button
    android:id="@+id/send"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Send"/>    <!--android:layout_weight:所占比重-->

可以看到当要用到weight时，width需要设置为0.
当两个控件都为1时各占1/2。当EditText的weight为1，button的width为warp_content时 :

可以看到EditText占用了button剩下的100%。

相对布局

RelativeLayout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="button1"/>

    <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:text="button2"/>

    <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="button3"/>

    <Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:text="button4"/>

    <Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:text="button5"/>
</RelativeLayout>

每个控件都是相对与父布局进行定位。

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

    <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="button3"/>

    <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/button3"
    android:layout_toLeftOf="@id/button3"
    android:text="button1"/>
    <Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/button3"
    android:layout_toRightOf="@id/button3"
    android:text="button2"/>
    <Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/button3"
    android:layout_toLeftOf="@id/button3"
    android:text="button4"/>
    <Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/button3"
    android:layout_toRightOf="@id/button3"
    android:text="button5"/>
    <Button
    android:id="@+id/button6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/button3"
    android:text="button6"/>
    <Button
    android:id="@+id/button7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@id/button3"
    android:text="button7"/>
    边缘对齐
</RelativeLayout>

android:layout_above属性可以让一个空间处于另一个控件上方，需要提供相对控件的id引用。

button7的android:layout_alignRight=”@id/button3”为 : 与button3控件右边缘对齐。button6的 android:layout_alignTop=”@id/button3”：与button3的上边缘对齐。

帧布局

FrameLayout
没有方便的定位方式，所有控件都会默认摆放在布局的左上角。

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

    <TextView
    android:id="@+id/text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is a TextView"
    />

    <ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    />
</FrameLayout>

TextView先定义的所以ImageView盖住了它。
可以通过

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

    <TextView
    android:id="@+id/text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:text="This is a TextView"
    />

    <ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:layout_gravity="right"
    android:src="@mipmap/ic_launcher"
    />
</FrameLayout>

android:layout_gravity来改变控件的位置。

百分比布局

android.support.percent.PercentFrameLayout
允许直接指定控件在布局中所占的百分比。
这个布局需要在app/build.gradle倒入相应的包
物理位置是SDK/extras/android/m2repository/com/android/support/percent
再从中找到对应的包导入进来
对应包需要与android studio版本 SDK版本都适配起来。

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "com.example.yezhou.com.uilayouttest"
        minSdkVersion 24
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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:26.+'
    compile 'com.android.support:percent:26.0.0-alpha1'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
    testCompile 'junit:junit:4.12'
}

<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%"
    />
    <Button
    android:id="@+id/button2"
    android:text="Button 2"
    android:layout_gravity="right|top"
    app:layout_widthPercent="50%"
    app:layout_heightPercent="50%"
    />
    <Button
    android:id="@+id/button3"
    android:text="Button 3"
    android:layout_gravity="left|bottom"
    app:layout_widthPercent="50%"
    app:layout_heightPercent="50%"
    />
    <Button
    android:id="@+id/button4"
    android:text="Button4"
    android:layout_gravity="right|bottom"
    app:layout_widthPercent="50%"
    app:layout_heightPercent="50%"/>   
</android.support.percent.PercentFrameLayout>

由于百分比布局不是内置在SDK中的所以写全包路径。
PercentFrameLayout还是会继承FrameLayout的特性。

---

此博文为个人学习笔记，仅供个人学习使用，希望对大家有帮助。