用户界面下

朴灿烈づ我的快乐病毒、 2022-02-16 11:48 246阅读 0赞

# 常用的UI布局 #

## 1.1 概述 ##

布局本身是不能显示出任何数据, 它可以包含一些子视图, 并控制子视图的布局。  
常用的Layout如下：

*  LinearLayout
 *  RelativeLayout
 *  FrameLayout
 *  ListView
 *  GridView

## 1.2 LinearLayout ##

线性布局: 用来控制其子View以水平或垂直方式展开显示。  
重要属性:

*  orientation(方向)
 *  layout\_weight(权重)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70]

#### 理解LinearLayout权重 ####

layout\_weight(权重)的值

*  `=0`(默认值): 指定多大空间就占据多大的空间。
 *  `>0`: 将父视图中的可用空间进行分割, 值越大权重就越大, 占据的比例就会越大。

Layout\_weight的使用场景：

*  将布局的宽度或高度平均分成几个等份。
 *  垂直方向上占用中间所有空间 或 水平方向上占用中间所有空间。

## 1.3 RelativeLayout ##

1.  相对布局: 用来控制其子View以相对定位的方式进行布局显示
2.  相对布局是最灵活, 最强大,也是学习难度最大的布局
3.  相对布局相关属性比较多:  
    – 兄弟视图之间: 同方向对齐, 反方向对齐  
    – 与父视图之间: 同方向对齐, 居中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 1]

## 1.4 FrameLayout ##

*  帧布局中的每一个子View都代表一个画面，默认以屏幕左上角作为（ 0,0 ）坐标，按定义的先后顺序依次逐屏显示 ， 后面出现的会覆盖前面的画面。
 *  通过子View的android:layout\_gravity 属性来指定子视图的位置。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 2]

### 1.5属性的划分 ###

**针对任何View的属性：**

*  常用的最基本属性
 *  内边距属性 padding
 *  外边距属性 margin  
    **只针对RelativeLayout的属性**
 *  反方向对齐属性 to/above/below
 *  同方向对齐属性 align
 *  相对父视图的属性 alignparent/center  
    **只针对LinearLayout的属性**
 *  权重属性 weight
 *  方向属性 oritation

#### 1.5.1 常用基本属性 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 3]

#### 1.6 内边距与外边距 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 4]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 5]

#### 1.7 相对兄弟视图定位 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 6]

#### 1.8 相对父视图定位 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 7]

# ListView #

## 2 ListView理解 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 8]

## 3 Adapter ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 9]

## 4 ListView + ArrayAdapter ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 10]

### 4.1 代码如下： ###

activity\_main.xml

iterm\_arrary\_adapter.xml

<?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="40px" android:textSize="20px" android:gravity="center_vertical">
        
    
    </TextView>

MainActivity.java

package com.shenju.test007;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    /** * 用ArrayAdapter显示文本列表 * @author SJ-001 * */
    public class MainActivity extends Activity { 
    
    	private ListView lv_main;
    	@Override
    	protected void onCreate(Bundle savedInstanceState) { 
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		lv_main=(ListView) findViewById(R.id.lv_main);
    		//准备数据
    		String [] array={ "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R"};
    		//创建adapter对象
    		ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,R.layout.iterm_arrary_adapter, array);
    		//设置adapter显示列表
    		lv_main.setAdapter(adapter);
    		
    	}
    }

### 4.2 ListView + SimpleAdapter ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 11]  
activity\_main.xml

iterm\_simple\_adapter.xml

<?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="wrap_content"
        android:orientation="horizontal" >
    
        <ImageView
            android:id="@+id/iv_item_icon"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/f1" />
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" 
            android:gravity="center_vertical"
            android:layout_marginLeft="10dp">
    
            <TextView
                android:id="@+id/tv_item_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />
    
            <TextView
                android:id="@+id/tv_item_content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />
    
        </LinearLayout>
    
    </LinearLayout>

SimpleAdapterMainActivity.java

package com.shenju.test007;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.widget.ListView;
    import android.widget.SimpleAdapter;
    
    /** * 用SimpleAdapter显示文本列表 * 要注意图片不能太大 否则就报内存溢出 * @author SJ-001 * */
    public class SimpleAdapterMainActivity extends Activity { 
    
    	private ListView lv_main;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) { 
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		lv_main = (ListView) findViewById(R.id.lv_main);
    		// 准备集合数据
    		List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
    		Map<String, Object> map = new HashMap<String, Object>();
    		map.put("icon", R.drawable.f1);
    		map.put("name", "狗大");
    		map.put("content", "可爱的狗大");
    		data.add(map);
    
    		map = new HashMap<String, Object>();
    		map.put("icon", R.drawable.f2);
    		map.put("name", "狗2");
    		map.put("content", "可爱的狗2");
    		data.add(map);
    
    		map = new HashMap<String, Object>();
    		map.put("icon", R.drawable.f3);
    		map.put("name", "车");
    		map.put("content", "可爱的车");
    		data.add(map);
    
    		// map对象中的key的数组, 用于得到对应的value
    		String[] from = {  "icon", "name", "content" };
    		// Item布局文件中的子view的id的数组
    		int[] to = {  R.id.iv_item_icon, R.id.tv_item_name, R.id.tv_item_content };
    
    		// 准备SimpleAdapter对象
    		SimpleAdapter adapter = new SimpleAdapter(this, data,
    				R.layout.iterm_simple_adapter, from, to);
    		// 设置Adapter显示列表
    		lv_main.setAdapter(adapter);
    
    	}
    }

### 4.3 ListView + BaseAdapter ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 12]MainActivity.java

package com.shenju.test007;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import com.shenju.ShopInfo;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.ListView;
    import android.widget.SimpleAdapter;
    import android.widget.TextView;
    
    /** * 用baseAdapter显示文本列表 * 要注意图片不能太大 * * @author SJ-001 * */
    public class MainActivity extends Activity { 
    
    	private ListView lv_main;
    	List<ShopInfo> lists=null;
    	
    	@Override
    	protected void onCreate(Bundle savedInstanceState) { 
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		lv_main = (ListView) findViewById(R.id.lv_main);
    		lists=new ArrayList<ShopInfo>();
    
    		lists.add(new ShopInfo(R.drawable.f1,"1", "11"));
    		lists.add(new ShopInfo(R.drawable.f2,"2", "22"));
    		lists.add(new ShopInfo(R.drawable.f3,"3", "33"));
    		lists.add(new ShopInfo(R.drawable.f4,"4", "44"));
    		
    		MyAdapter adapter =new MyAdapter();
    		
    		// 设置Adapter显示列表
    		lv_main.setAdapter(adapter);
    
    	}
    	
    	class MyAdapter extends BaseAdapter{ 
    
    		/** * 返回总数 */
    		@Override
    		public int getCount() { 
    			// TODO Auto-generated method stub
    			return lists.size();
    		}
    
    		/** * 返回指定下标的数据 */
    		@Override
    		public Object getItem(int position) { 
    			
    			return lists.get(position);
    		}
    
    		@Override
    		public long getItemId(int position) { 
    			
    			return 0;
    		}
    
    		/** * 返回指定下标对应的item的view对象 */
    		@Override
    		public View getView(int position, View convertView, ViewGroup parent) { 
    			
    			Log.e("TAG", "执行getView() position="+position+" convertView="+convertView);
    			
    			//一定要判断是否为空 让其创建的view对象最多n+1个（n表示的是手机界面能显示的列表个数）
    			//否则每一次滑动都会创建view对象，而达不到对对象的复用，导致内存溢出。
    			if(convertView==null){ 
    				
    				//加载item的布局，得到view对象
    				convertView=View.inflate(MainActivity.this, R.layout.iterm_simple_adapter, null);
    			}
    			
    			
    			//根据position获取值
    			ShopInfo si=lists.get(position);
    			ImageView iv= (ImageView) convertView.findViewById(R.id.iv_item_icon);
    			TextView tv1= (TextView) convertView.findViewById(R.id.tv_item_name);
    			TextView tv2= (TextView) convertView.findViewById(R.id.tv_item_content);
    			
    			iv.setImageResource(si.getIcon());
    			tv1.setText(si.getName());
    			tv2.setText(si.getContent());
    			
    			return convertView;
    			
    		}
    		
    		
    	}
    }

# 5 样式和主题 #

### 5.1 样式(Style) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 13]activity\_main.xml

styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    
        
        <style name="AppBaseTheme" parent="android:Theme.Light">  </style>
    
        
        <style name="AppTheme" parent="AppBaseTheme">  </style>
    
        
        
        <style name="mystyle"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:drawableLeft">@android:drawable/star_big_on</item> <item name="android:textSize">30px</item> <item name="android:layout_marginLeft">20px</item> <item name="android:gravity">center_vertical</item> </style>
        
    	<style name="mytheme"> <item name="android:textColor"></item> </style>
    </resources>

### 5.2 主题(theme) ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 14]AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.shenju.test008" android:versionCode="1" android:versionName="1.0" >
    
        <uses-sdk android:minSdkVersion="18" android:targetSdkVersion="18" />
    
        <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
            
            <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/mytheme">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    
    </manifest>

# 练习1 显示所有应用列表 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 15]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70]: /images/20220216/34f54e331d5f4a6eb30a1f6541d4aa5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 1]: /images/20220216/2b0dd491f3074ebcb3f455c50e890aea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 2]: /images/20220216/63eb5bc2a5b64ef68e8a7dd15ebb0bd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 3]: /images/20220216/cc56c670de5c48e791e38ec11cd58dee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190422134842269.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 5]: /images/20220216/0af739e86be54ae0a9efef8e1be8e677.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 6]: /images/20220216/894dd1206ad543b2a047aa591bd6ab56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 7]: /images/20220216/7c3bc693f0a144d59170f4fe636d5bfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 8]: /images/20220216/823734e847c949fcb4356f7911a31c7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 9]: /images/20220216/6882f32c79504db99e1a37167ddf44cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 10]: /images/20220216/d3b9b0fc692d4a5fb4ea4f3c8b24b172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 11]: /images/20220216/7f4d50b101ec4546bafec3525c5c24cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 12]: /images/20220216/6c158ce211874fe3af9f3ba495cd154b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 13]: /images/20220216/a1b3ebd4b4a2413fa57ae68ffd1ab8a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 14]: /images/20220216/6c3b346eae164eed96a4389afa248e21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 15]: /images/20220216/20e52f41c0a747c19bc93f16ec0a396f.png