用户界面上

蔚落 2022-02-19 06:26 264阅读 0赞

# 1 理解UI #

### 1.1 UI的定义 ###

*  全称user interface, 意为: 用户界面。
 *  UI由View和ViewGroup组成。
 *  View类是所有视图(包括ViewGroup)的根基类。
 *  View在屏幕上占据一片矩形区域, 并会在上面进行内容绘制。
 *  ViewGroup包含一些View或ViewGroup, 用于控制子View的布局。

### 1.2 View的API结构 ###

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

### 1.3 UI的组成 ###

*  界面的整体布局(layout)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 1]
 *  组成可视界面的各个UI组件(Component)

# 2 UI事件 #

### 2.1 理解UI事件 ###

*  当用户通过手指触摸UI时, 系统会自动创建对应的Event对象。
 *  Android中提供了多种方式拦截处理不同类型的事件。
 *  视图本身就可以处理发生在该视图上的事件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 2]

### 2.2 使用UI事件 ###

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

# 3 常用的简单Component #

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

### 3.1 TextView 文本视图 ###

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

### 3.2 EditText 文本输入框 ###

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

### 3.3 Button 按钮 ###

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

### 3.4 ImageView 图片视图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 11]![在这里插入图片描述][20190416102454435.png]  
![在这里插入图片描述][20190416102544628.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 12]

### 3.5 CheckBox 多选 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 13]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 14]他们的监听事件是这个类：  
![在这里插入图片描述][20190417092622749.png]  
![在这里插入图片描述][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 16]

### 3.6 RadioGroup/RadioButton 单选框 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 17]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 18]  
实现的是这个监听接口  
![在这里插入图片描述][20190417092953223.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 19]

### 3.7 菜单 Component ###

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

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

方式1 ：硬编码方式

@Override
    	public boolean onCreateOptionsMenu(Menu menu) { 
    		
    		//参数1表示组id 参数2表示菜单唯一表示 参数3表示排序 参数4表示文本 
    		//点击菜单按钮就可以显示出来
    		menu.add(0, 1, 0, "新增");
    		menu.add(0, 2, 0, "删除");
    		
    		return super.onCreateOptionsMenu(menu);
    	}

方式2：加载菜单文件的方式  
首先右击res文件夹 生成menu文件。  
option\_menu.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android" >
        
        <item android:id="@+id/add" android:title="添加2"/>
        <item android:id="@+id/delete" android:title="删除2"/>
    
    </menu>

@Override
    	public boolean onCreateOptionsMenu(Menu menu) { 
    		
    		//加载菜单文件的方式
    		//1 得到菜单加载器对象
    			MenuInflater menuInflater=getMenuInflater();
    			
    		//2 加载菜单文件
    			menuInflater.inflate(R.menu.option_menu, menu);
    		return super.onCreateOptionsMenu(menu);
    	}

选中菜单项事件

@Override
    	public boolean onOptionsItemSelected(MenuItem item) { 
    		
    		if(item.getItemId()==R.id.add){ 
    			
    			Toast.makeText(this, "新增", 0).show();
    			
    		}else if(item.getItemId()==R.id.delete){ 
    			
    			Toast.makeText(this, "删除", 0).show();
    		}
    		
    		return super.onOptionsItemSelected(item);
    	}

### 3.7 ContextMenu : 上下文菜单 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 23]  
效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 24]

### 3.8 进度条Component ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 25]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 26]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 27]

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

private  LinearLayout ll_loadding;
    	private ProgressBar pb_progress_loadding;
    	private SeekBar sb_progress_loadding;
    	private OnSeekBarChangeListener onSeekBarChangeListener=new OnSeekBarChangeListener() { 
    		
    		@Override
    		public void onStopTrackingTouch(SeekBar seekBar) { 
    			Log.e("TAG", "离开滑杆");
    			
    			//获取SeekBar的进度数
    			int progress=sb_progress_loadding.getProgress();
    			//设置ProgressBar进度数
    			pb_progress_loadding.setProgress(progress);
    			if(progress==sb_progress_loadding.getMax()){ 
    				//INVISIBLE 不可见但是占用空间 gone不可见但是不占用空间
    				//ll_loadding.setVisibility(View.INVISIBLE);//如果sb_progress_loadding最大了则ll_loadding不可见
    				ll_loadding.setVisibility(View.GONE);
    			}else{ 
    				
    				ll_loadding.setVisibility(View.VISIBLE);//可见
    			}
    		}
    		
    		@Override
    		public void onStartTrackingTouch(SeekBar seekBar) { 
    			Log.e("TAG", "按下滑杆");
    		}
    		
    		@Override
    		public void onProgressChanged(SeekBar seekBar, int progress,
    				boolean fromUser) { 
    			Log.e("TAG", "滑杆移动");
    			
    		}
    	};

### 3.9 对话框Component ###

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

##### 3.9.1 AlertDialog : 警告框 #####

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 29]  
语法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 30]  
代码如下：

/** * 显示一般AlertDialog * @param v */
    	public void showAD(View v){ 
    		
    		
    		new AlertDialog.Builder(this)
    		.setTitle("删除数据")
    		.setMessage("你确定删除数据吗？")
    		.setPositiveButton("删除", new DialogInterface.OnClickListener() { 
    			
    			@Override
    			public void onClick(DialogInterface dialog, int which) { 
    			
    				Toast.makeText(MainActivity.this, "已经删除", 0).show();
    			}
    		})
    		.setNegativeButton("取消", new DialogInterface.OnClickListener() { 
    			
    			@Override
    			public void onClick(DialogInterface dialog, int which) { 
    				
    				Toast.makeText(MainActivity.this, "取消删除", 0).show();
    			}
    		})
    		.show();
    	}

单选列表

/** * 显示单选列表AlertDialog */
    	public void showLD(View v){ 
    		final String [] items={ "红","黄","蓝","绿"};
    		new AlertDialog.Builder(this)
    		.setTitle("指定背景颜色")
    		//参数2表示默认选中的元素
    		.setSingleChoiceItems(items, 2, new DialogInterface.OnClickListener() { 
    			
    			//参数2 表示传过来选中的元素的下标
    			@Override
    			public void onClick(DialogInterface dialog, int which) { 
    				
    				Toast.makeText(MainActivity.this,items[which] , 0).show();
    				//点击后移除对话框
    				dialog.dismiss();
    			}
    		}).show();
    
    	}

##### 3.9.2 自定义AlertDialog #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 31]  
代码如下：

//显示自定义AlertDialog
    	public void showCD(View v){ 
    		
    		View view=View.inflate(this,R.layout.dialog_view, null);
    		final EditText ETuserName=(EditText) view.findViewById(R.id.userName);
    		final EditText ETpassword=(EditText) view.findViewById(R.id.password);
    		
    		new AlertDialog.Builder(this)
    		.setView(view)
    		.setNegativeButton("取消",null)
    		.setPositiveButton("确定",new DialogInterface.OnClickListener() { 
    			
    			@Override
    			public void onClick(DialogInterface dialog, int which) { 
    				
    				String username=ETuserName.getText().toString();
    				String password=ETpassword.getText().toString();
    				Toast.makeText(MainActivity.this,"userName="+username+",password="+password , 0).show();
    			}
    		})
    		.show();
    		
    	}

##### 3.9.3 ProgressDialog : 带进度Dialog #####

/** * 显示圆形进度ProgressDialog */
    	
    	public void showPD(View v){ //回调方法：是在主线程中完成的
    		
    		final  ProgressDialog pdialog=ProgressDialog.show(this, "数据加载", "数据加载中...");
    		//模拟做一个长时间的工作
    		//要注意长时间的工作不能在主线程中做，得要启动分线程完成。
    		new Thread(){ 
    			
    			public void run(){ 
    				
    				try { 
    					Thread.sleep(2000);
    				} catch (InterruptedException e) { 
    					
    					e.printStackTrace();
    				}
    				
    				pdialog.dismiss();//方法在分线程中执行，但内部使用Handler实现主线程移除Dialog
    				
    				//不能在分线程中直接更新UI 但是可以间接 比如上面的pdialog.dismiss()
    				//runOnUiThread是在分线程中执行
    				runOnUiThread(new Runnable() { 
    					
    					@Override
    					public void run() { //在主线程中执行
    						
    						Toast.makeText(MainActivity.this,"加载完成" , 0).show();
    					}
    				});
    			}
    			
    		}.start();
    	}

/** * 显示水平进度ProgressDialog * @param v */
    	public void showPD2(View v){ 
    		
    		//创建Dialog
    		final ProgressDialog pd=new ProgressDialog(this);
    		//设置样式
    		pd.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
    		//显示
    		pd.show();
    		//启动分线程 加载数据 显示进度 当加载完成后移除Dialog
    		new Thread(new Runnable() { 
    			
    			@Override
    			public void run() { 
    				
    				int count=20;
    				pd.setMax(20);
    				for(int i=1;i<=count;i++){ 
    					
    					try { 
    						Thread.sleep(200);
    					} catch (InterruptedException e) { 
    						
    						e.printStackTrace();
    					}
    					pd.setProgress(pd.getProgress()+1);
    				}
    				
    				//然后移除
    				pd.dismiss();
    			}
    		}).start();
    		
    	}

##### 3.9.4 DateDialog : 日期Dialog和TimeDialog : 时间Dialog #####

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

/** * 显示DatePickerDialog * @param v */
    	public void showDateAD(View v) { 
    		
    		//创建日历对象
    		Calendar calendar = Calendar.getInstance();
    		//得到当前的年月日
    		int year = calendar.get(Calendar.YEAR);//得到年份
    		int monthOfYear = calendar.get(Calendar.MONTH)+1;//月 月份+1 因为是从0开始的
    		int dayOfMonth = calendar.get(Calendar.DAY_OF_MONTH);//得到日
    		Log.e("TAG", year+"-"+monthOfYear+"-"+dayOfMonth);
    		
    		new DatePickerDialog(this, new android.app.DatePickerDialog.OnDateSetListener() { 
    			
    			@Override
    			public void onDateSet(DatePicker view, int year, int monthOfYear,
    					int dayOfMonth) { 
    				Log.e("TAG", year+"--"+monthOfYear+"--"+dayOfMonth);
    			}
    		}, year, monthOfYear, dayOfMonth).show();
    	}
    	
    	/** * 显示时间 * @param v */
    	public void showTimeAD(View v) { 
    		
    		Calendar c = Calendar.getInstance();
    		int hourOfDay = c.get(Calendar.HOUR_OF_DAY); //得到小时
    		int minute = c.get(Calendar.MINUTE); //得到分钟
    		Log.e("TAG", hourOfDay+":"+minute);
    		
    		new TimePickerDialog(this, new OnTimeSetListener() { 
    			
    			boolean bool=true;
    			@Override
    			public void onTimeSet(TimePicker view, int hourOfDay, int minute) { 
    				if(bool){ 
    					
    					Log.e("TAG", hourOfDay+"::"+minute);
    					bool=false;
    				}
    				
    			}
    		}, hourOfDay, minute, true).show();
    		
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70]: /images/20220219/da802b071c864b7a988b63f54f77db36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 1]: /images/20220219/270f3b6fea024d67b8abb204cfde5c0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 2]: /images/20220219/c2741e90ad3a481cb91a3b52a8e90fb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 3]: /images/20220219/335b321f6c0a4fa69477056050cff936.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 4]: /images/20220219/cb5085dddcdf4d57a7d0e749107a46b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 5]: /images/20220219/88c95f757da948509387ea1a71add555.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190415204033998.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 7]: /images/20220219/f5f57a59070a4ce19677089f0a533036.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 8]: /images/20220219/de26426155db482894ed8437d8f37209.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 9]: /images/20220219/ead523a0e3d24594a2bdb211f7023a3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 10]: /images/20220219/bc02e9035bf14a45a3b10854b827ae7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20190416094209962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw==,size_16,color_FFFFFF,t_70
[20190416102454435.png]: /images/20220219/84ad28e04edb4fd28edb164c2bdfdbce.png
[20190416102544628.png]: /images/20220219/0129c9d7881d4991b1f86a007ae8af7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 12]: /images/20220219/5ae861f53d874687944abbf80538512c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20190416161145640.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 14]: /images/20220219/8e14001ea8f34b2a9a7b5607e434c5da.png
[20190417092622749.png]: /images/20220219/db3970f9a9c7429bafe7d5d99069c6e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20190417092641436.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 16]: /images/20220219/3d909e06f6534e7eb229c9fe2ab63227.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20190417092827712.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 18]: /images/20220219/371db099d04f4a7195ced2ec66fa554d.png
[20190417092953223.png]: /images/20220219/8b9c990e9c0745b2a50fc5eba92b89a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 19]: /images/20220219/239a560e0b16467a926e6ad2991f1a15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 20]: /images/20220219/6ea6d07cc6624e5cb2ef9bfe0b1b7c4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 21]: /images/20220219/b392cf6e1b2842ea9a65486d194443d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 22]: /images/20220219/8fa3e293cbf54f98b384c2dd2e4f90b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 23]: /images/20220219/0413466e4e034ffaac5e9ffb79f026db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 24]: /images/20220219/3dc719727da34851b8483a7566fe2d84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 25]: https://img-blog.csdnimg.cn/2019041717104415.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 26]: https://img-blog.csdnimg.cn/20190417171101183.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 27]: /images/20220219/c07dc96d43fb4e9c8733327cd639092c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 28]: /images/20220219/04f3835491a546e1b283a3c182148d53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 29]: /images/20220219/21328881da1e491c9b0e51f57bf9a8bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 30]: /images/20220219/aaebc47bced04500b9b5a896014ef4a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 31]: /images/20220219/3396ff9d185b409289bd6cae801dc878.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1MjM3NDYzMzU4Mw_size_16_color_FFFFFF_t_70 32]: https://img-blog.csdnimg.cn/20190418165738774.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 33]: /images/20220219/0bcd4329ae8946aaa064ccd140a9c1ac.png