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

我不是女神ヾ 2022-06-07 07:14 138阅读 0赞

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

## 常用的基础控件 ##

### TextView ###

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

id :唯一标识符  
android:layout\_width :控件的宽  
android:layout\_height :控件的高  
match\_parent :让当前控件大小和父布局大小一样  
fill\_parent :同上  
wrap\_content :当前控件大小刚好包含住里面的内容  
android:gravity :控件文字的对齐方式  
android:textColor :控件内文本颜色  
android:textSize :控件内文本大小

![Exler][]

### Button ###

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

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

![Exler][Exler 1]

同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 ###

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

![Exler][Exler 2]

### ImageView ###

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

![Exler][Exler 3]

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

![Exler][Exler 4]

实现点击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来记录当前图片，点击就进行判断，然后做出相应的切换。

![Exler][Exler 5]

![Exler][Exler 6]

### ProgressBar ###

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

![Exler][Exler 7]

@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属性可以将它指定为水平进度条

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

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

![Exler][Exler 8]

![Exler][Exler 9]

### 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();

![Exler][Exler 10]

### ProgressDialog ###

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

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

![Exler][Exler 11]

利用多线程加载进度条 :

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>

![Exler][Exler 12]

## 布局 ##

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

### 线性布局 ###

LinearLayout

在LinearLayout标签中有一个android:orientation属性  
当它为vertical时  
![Exler][Exler 13]  
可以看到button都是在垂直方向上从左上角开始呈线性显示的。  
当它为horizontal时  
![Exler][Exler 14]  
这也是orientaion这个属性的默认值。  
还可以通过android:layout\_gravity对控件的位置进行设置

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

![Exler][Exler 15]

而LinearLayout设置为horizontal的情况下，控件可以控制自己在垂直位置上的距离。  
![Exler][Exler 16]  
在线性布局中还有一个重要的属性，android:layout\_weight。  
当前控件在此位置占的权重。

![Exler][Exler 17]  
可以看到当要用到weight时，width需要设置为0.  
当两个控件都为1时各占1/2。当EditText的weight为1，button的width为warp\_content时 :

![Exler][Exler 18]  
可以看到EditText占用了button剩下的100%。

### 相对布局 ###

RelativeLayout

![Exler][Exler 19]

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

![Exler][Exler 20]  
android:layout\_above属性可以让一个空间处于另一个控件上方，需要提供相对控件的id引用。

button7的android:layout\_alignRight=”@id/button3”为 : 与button3控件右边缘对齐。button6的 android:layout\_alignTop=”@id/button3”：与button3的上边缘对齐。

### 帧布局 ###

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

![Exler][Exler 21]

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

android:layout\_gravity来改变控件的位置。  
![Exler][Exler 22]

### 百分比布局 ###

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>

![Exler][Exler 23]

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

--------------------

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

[Exler]: /images/20220607/2dc19d6dc08f4e86bc9449e0d6682b25.png
[Exler 1]: /images/20220607/c35dae9dc8aa482293c8c543daa65602.png
[Exler 2]: /images/20220607/3e39a7967734407f8873f9bb574f01bd.png
[Exler 3]: /images/20220607/4daf020e0e5640288614207555e3c9de.png
[Exler 4]: /images/20220607/65e93d0c28404534b02d8c2793f80dbb.png
[Exler 5]: /images/20220607/0856cde666dd4a208d3b134683b74fa0.png
[Exler 6]: /images/20220607/3631bc9b47bb438688e71852bc326a82.png
[Exler 7]: /images/20220607/0395a4aa06834196b6f96473fb4101ac.png
[Exler 8]: /images/20220607/502586618bcf4955b8ccebb916ad505b.png
[Exler 9]: /images/20220607/6f1a46f5278f451b90af6e72222ceb62.png
[Exler 10]: /images/20220607/708ef283c4c24f40a5e5a13774575350.png
[Exler 11]: /images/20220607/f38688c9ff2b469d94ca26c418c651ec.png
[Exler 12]: /images/20220607/554a588aed8547a98ca1f7dab4330252.png
[Exler 13]: /images/20220607/ef2d98e6e28b4faf93294a5c6a2cd0d4.png
[Exler 14]: /images/20220607/e6d02edefc2c45b08f365cf5fe883025.png
[Exler 15]: /images/20220607/b85904a4c71346f984087a065d2c0350.png
[Exler 16]: /images/20220607/39e29ead058e446bb3ed9345e458e276.png
[Exler 17]: /images/20220607/8d8fb7bd86c1450692636965983fa86f.png
[Exler 18]: /images/20220607/0fa91f65af9743529010797a88fb8051.png
[Exler 19]: /images/20220607/b69694d8191e491e91d19ab40bf18c55.png
[Exler 20]: /images/20220607/0a29fb7ef7f349858ee4ed5386e88409.png
[Exler 21]: /images/20220607/b6c904e72a214a958e4637887b0c1da2.png
[Exler 22]: /images/20220607/7a39b77cd56f464baf041c0d2d0c1bcd.png
[Exler 23]: /images/20220607/217fb4543ade4acdb076ec905d7a322a.png