学习流程来自《第一行代码》(第二版)
常用的基础控件
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的特性。
此博文为个人学习笔记,仅供个人学习使用,希望对大家有帮助。