android ui界面设计网站 android程序ui界面设计

UI设计

• 🎇常用控件的使用方法

• 🎆TextView
• 🎆Button
• 🎆EditText
• 🎆ImageView
• 🎆ProgressBar
• AlterDialog

• 🎇三种基本布局

• 🎆LinearLayout
• 🎆RelativeLayout
• 🎆FrameLayout

• 🎇自定义控件

• 🎆引入布局
• 🎆继承View

• 🎇ListView

• 🎆定义一个普通ListView
• 🎆定义一个带图案的ListView

• 🎇RecyclerView

🎇常用控件的使用方法

🎆TextView

<TextView
	android:id="@+id/text"
	android;layout_width ="match_parent"
	android:layout_height="wrap_content"
	android:gravity="center" //bottom top start end
	android:text="This is TextView"
	android:textColor="#00ff00"//字体颜色
	android:textSize="24sp"/>//文字大小

🎆Button

• Button尽管text上写的是Button1（小写字母）到程序运行时显示的却是BUTTON1.因为Android系统会默认按钮上字母的全变为大写.

<Button
	android:id="@+id/button1"
	android;layout_width ="match_parent"
	android:layout_height="wrap_content"
	android:text="button1"
	android:textAllCaps="false"/>//这句话可以让按钮按text上原来的大小写显示

🎆EditText

• 可以编辑的输入框

<EditText
	android:id="@+id/EditText1"
	android;layout_width ="match_parent"
	android:layout_height="wrap_content"
	android:hint="Type something here"//给你一段提示性文本
	android:maxLines="2"/>//让输入框最多只有两行

🎆ImageView

• 获取图片控件，先在res下创建一个drawable-xxxhdpi文件夹，然后将你的图片拖入到该文件夹当中去。最后在MainActivity.xml中直接写ImageView的信息。

<ImageView
	android:id="@+id/imageView"
	android;layout_width ="wrap_parent"
	android:layout_height="wrap_content"
	android:src="@drawable/junjun1"/>  //src属性给ImageView指定一张图片

通过点击按钮将junjun1切换成junjun2。

• 其中setImageResource就是切换图片的方法

🎆ProgressBar

• 用于在界面上显示一个进度条（正常情况下进度条会一直存在）
  View.Visbility是每个控件都有的属性
• getVisibility获得Visibility属性
• setVisibility更新VIsibility属性
• View.GONE完全消失属性
• View.INVISIBLE透明属性

<ProgressBar
	android:id="@+id/progressBar"
	android;layout_width ="match_parent"
	android:layout_height="wrap_content"
	//原来是一个圆形进度条
	style="?android:attr/progressBarStyleHorizontal"
	android:max="100"/>//通过style将进度条变成一个长方形进度条
	//max限制进度条长度为100

AlterDialog

• 可以在当前页面弹出一个确认对话框，置顶于所有界面之上，屏蔽其它控件的交互能力。不需要在xml中写控件，直接在MainAcitivity里面写。

@Override
public void onClick(View view){
	switch(view.getId()){
		case R.id.Button1:
		 	AlterDialog.Builder dialog=new AlterDialog.Builder(MainActivity.this);
		 	dialog.setTitle("this is dialog");//设置标题内容
		 	dialog.setMessage("something important");
		 	dialog.setCancelable(false);//能否通过back键退出
		 	//设置两个键
		 	dialog.setPositiveButton("OK",new DialogInterface.OnClickListener(){
		 		@Overrid
		 		public void onClick(DialogInterfacee dialogInterface,int i){
		 			//此处暂时不重写，等按钮点击开发需要实际含义了再写
		 		}
		 	});
		 	dialog.setNegativeButton("cancel",new DialogInterface.OnClickListener(){
		 		@Overrid
		 		public void onClick(DialogInterfacee dialogInterface,int i){
		 			//此处暂时不重写，等按钮点击开发需要实际含义了再写
		 		}
		 	});
		 	dialog.show();
		 default:
		 	break;
	}
}

🎇三种基本布局

🎆LinearLayout

anroid:layout_ weight="1"//以比例的方式，如果在同一行就是，所有把自己的weight和weight值和所占的比值，在下图因为都是1，就是平分

• **android:orientation=“horizontal”**横向排列，所以我们第二个Button按钮控件才会出现在EidtText的右边

🎆RelativeLayout

• 相对于布局，控件所在位置。以及相对于控件，控件所在位置



• 相对于控件
• 将其中一个控件设置为：android:layout_centerInParent="true"//即设置在布局的中间
• 剩下的可以有这些定义：
  android:layout_above="@Id/button3"//在按钮button3的上面android:layout_below="@Id/button3"//在下面android:layout_toLeftOf="@Id/button3"//在左边android:layout_toRightOf="@Id/button3"//在右边

🎆FrameLayout

• 帧布局：默认都是在左上角生成，通过android:layout_gravity可以简单修改位置。因为其位置关系较为简单使用环境比较少



• 
  



• 
  

🎇自定义控件

• 利用View的继承结构来创建自定义控件

🎆引入布局

1. 在layout文件下创建一个新的xml文件title
2. 在这个xml文件下写自己的布局
3. 在Activity_Main的xml文件下include自定义的布局
5. 在Activity_Main下隐藏自身的标题



6. 
   



7. 
   

• 在多个Activity使用这个布局，都只需要include就行



• 
  
• 4.隐藏自带的标题

ActionBar actionBar = getSupportActionBar();
	if(actionBar!=null){
		actionBar.hide();
	}

🎆继承View

• 引入布局的情况下，布局内控件的事件如果要生效，我们还要到使用它的各个Activity中注册事件，非常麻烦。例如上一个引入布局中的back按钮，如果要生效，我们得在每个调用它的Activity当中再写几遍点击事件的注册。

1. 重写一个类继承view
2. 重写里面的构造方法
3. 创建一个布局文件
4. 在构造方法中通过容器来加载这个布局文件
6. 在MainActivity的布局文件中调用自定义控件



7. 
   



8. 
   

🎇ListView

🎆定义一个普通ListView

• 现在主活动的布局文件中直接写出ListView控件
• 提取数据（通过data数组获取数据）
• 构建ArrayAdapter适配器
• 将适配器对象传入到List View中

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

    <ListView
        android:id="@+id/lv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

🎆定义一个带图案的ListView

• 在主活动的布局文件中写出ListView
• 新建一个fruit_item.xml在layout下。因为要带图片，所以写一个新布局
• 新建一个fruit类
• 新建一个fruitAdapt适配器（难点）
  准备工作结束
• 提取数据（用集合）fruit类
• 构建适配器
• 将h适配器传入到ListView中

3. 新的布局文件



4. 
   
6. 新建的fruit类



7. 
   
9. 新写一个适配器



10. 
    



11. 
    

🎇RecyclerView

2. 使用RecyclerView前，我们先要将RecyclerView添加在文件build.gradle中‘



3. 
   
5. 在主活动的布局文件中添加RecyclerView控件



6. 
   
8. 新建一个item_xml布局文件



9. 
   
11. 构建一个类



12. 
    
14. 新建一个适配器



15. 
    
17. 后续一系列操作



18.