戳蓝字“前端自学社区”关注我们哦，后续更新更多干货
· 前· 言 ·
“最近报名了一个Android比赛，所以这几天一直备战学习Android方面知识，虽然之前学过，但已经很久没写Android了，忘的差不多了，哈哈。于是这几天刷Android视频学习，总结了学习中遇到之前没学过的知识点，还有一些常用的属性。以后开发Android的话，可以直接拎起来干。我一直对移动端有特别的爱好，想开发一款的APP，但又不想用Andorid写，写UI太繁琐，由于之前常写前端，已经习惯了前端的开发方式。后续有空会用Flutter来搞搞，目前现在能应付比赛就行了”
关于Android UI 设计
常用布局
线性布局
id="@+id/edtInput",ID 是连接UI 与代码的桥梁
layout_width="fill_parent" ，自动填充至屏幕宽度
layout_width="wrap_content" ，自动填充为控件大小
在LinearLayout 里面的控件，按照水平或者垂直排列：
orientation="horizontal" ：水平排列；
orientation=" vertical" ：垂直排列
使用android:layout_weight指定百分比（权值、权重）。
在LinearLayout嵌套的情况下，子LinearLayout必须要设置权值，否则默认的情况是未设置权值的子LinearLayout占据整个屏幕。
android:id —— 为控件指定相应的ID
android:text —— 指定控件当中显示的文字，需要注意的是，这里尽量使用strings.xml文件当中的字符串
android:grivity —— 指定内部控件的基本位置，比如说居中，居右等位置
android:textSize —— 指定控件当中字体的大小
android:background —— 指定该控件所使用的背景色,RGB命名法
android:width —— 指定控件的宽度
android:height —— 指定控件的高度
android:padding* —— 指定控件的内边距，也就是说控件当中的内容
android:sigleLine —— 如果设置为真的话，则将控件的内容在同一行当中进行显示
android:layout_weight —— 按比例 平分内部空间的大小，把剩余宽度平分
相对布局
关于Android UI 控件
TextView
TextView常用属性
android:autoLink设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)
android:autoText如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输入的时候起作用。
android:cursorVisible设定光标为显示/隐藏，默认显示。
android:drawableTop在text的正上方输出一个drawable。
android:ellipsize设置当文字过长时,该控件该如何显示。有如下值设置：”start”—?省略号显示在开头;”end”——省略号显示在结尾;”middle”—-省略号显示在中间; ”marquee” ——以跑马灯的方式显示(动画横向移动)
android:maxLines设置文本的最大显示行数，与width或者layout_width结合使用，超出部分自动换行，超出行数将不显示。
android:lineSpacingMultiplier设置行间距的倍数。如”1.2”
android:phoneNumber设置为电话号码的输入方式。
android:textColorHighlight被选中文字的底色，默认为蓝色
android:textColorHint设置提示信息文字的颜色，默认为灰色。与hint一起使用。
android:textStyle设置字形[bold(粗体) 0, italic(斜体) 1, bolditalic(又粗又斜) 2] 可以设置一个或多个，用“|”隔开
android:height设置文本区域的高度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)
android:maxHeight设置文本区域的最大高度
android:minHeight设置文本区域的最小高度
android:width设置文本区域的宽度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)，与layout_width的区别看这里。
android:maxWidth设置文本区域的最大宽度
android:minWidth设置文本区域的最小宽度
Button
android:drawable //放一个drawable资源
android:drawableTop //可拉伸要绘制的文本的上面
android:drawableBottom //可拉伸要绘制的文本的下面
android:drawableLeft //可拉伸要绘制的文本的左侧
android:drawableRight //可拉伸要绘制的文本的右侧
android:text //设置显示的文本
android:textColor //设置显示文本的颜色
android:textSize //设置显示文本字体大小
android:background //可拉伸使用的背景
android:onClick //设置点击事件
EditText 类似于 HTML 中的表单Input
EditText 监听输入内容
EditText etOne= (EditText) findViewById(R.id.et_phone);
etOne.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
Log.i("Ansen","内容改变之前调用:"+s.toString());
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
Log.i("Ansen","内容改变，可以去告诉服务器:"+s.toString());
}
@Override
public void afterTextChanged(Editable s) {
Log.i("Ansen","内容改变之后调用:"+s.toString());
}
});
RadioButton 单选框
XML RadioButton 是被包裹在RadioGroup中的
android:id="@+id/r1" android:layout_width="match_parent" android:layout_height="match_parent" > android:id="@+id/man" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="男" android:checked="true" /> android:id="@+id/girl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="女" /> 自定义RadioButton图标 总结一下设置图标的三种方式： （1）button属性：主要用于图标大小要求不高，间隔要求也不高的场合。 （2）background属性：主要用于能够以较大空间显示图标的场合。 （3）drawableLeft属性：主要用于对图标与文字之间的间隔有要求的场合。 注意使用 background 或者 drawableLeft时 要设置 android:button="@null" 监听选中RadioButton的内容 RadioGroup申明的控件.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { #找到选中的RadioButton 中id RadioButton radioButton = (RadioButton) group.findViewById(checkedId); # radioButton.getText() 为选中的内容 Toast.makeText(RadioActivity.this,radioButton.getText(),Toast.LENGTH_LONG).show(); } }); CheckBox 复选框 常用属性 常用属性 android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" checked如果为true，就会选中该复选框 android:text="男" 自定义复选框图标 改变默认样式 android:button="@drawable/check" 通过改变button的属性来改变默认样式，指定 drawable/自定义的样式 自定义样式 自定义CheckBox图标显示 如何判断CheckBox被选中 # onCheckedChanged事件，通过isChecked 来判别是否被选中 public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { cb.setText("This checkbox is: checked"); } else { cb.setText("This checkbox is: unchecked"); } } ImageView 相当于HTML中的image 常用属性 常用属性，并且这些属性都有与之对应的getter、setter方法： android:adjustViewBounds：设置ImageView是否调整自己的边界来保持所显示图片的长宽比。 android:maxHeight：设置ImageView的最大高度。 android:maxWidth：设置ImageView的最大宽度。 android:scaleType：设置所显示的图片如何缩放或移动以适应ImageView的大小。 android:src：设置ImageView所显示的Drawable对象的ID。 对于android:scaleType属性，因为关于图像在ImageView中的显示效果，所以有如下属性值可以选择： matrix：使用matrix方式进行缩放。 fitXY：横向、纵向独立缩放，以适应该ImageView。 fitStart:保持纵横比缩放图片，并且将图片放在ImageView的左上角。 fitCenter：保持纵横比缩放图片，缩放完成后将图片放在ImageView的中央。 fitEnd：保持纵横比缩放图片，缩放完成后将图片放在ImageView的右下角。 center：把图片放在ImageView的中央，但是不进行任何缩放。 centerCrop：保持纵横比缩放图片，以使图片能完全覆盖ImageView。 centerInside：保持纵横比缩放图片，以使得ImageView能完全显示该图片。 Android如何加载网络图片 #如何在加载网络图片？ 1. 加入网络请求在 manifests 2.使用第三方库加载网络图片 ---- 我使用的glide 放置到 build.gradle中， 自动构建环境 3.直接使用第三方提供的api，导入对应库 使用 glide api 简单直接粗暴 Glide.with(mContext).load("https://ss1.bdstatic.com/70cFvXSh\_Q1YnxGkpoWK1HF6hhy/it/u=3728935550,1593997461&fm=26&gp=0.jpg").into(holder.img); 效果如下 GrideView 使用 和ListView 类似 网格视图 如何使用GrideView #如何使用 GrideView 它的使用和 ListView 相似。 1. 先建立XML GrideView / ListView eg： android:id="@+id/grade_1" android:layout_width="match_parent" android:layout_height="match_parent" android:horizontalSpacing="2dp" android:numColumns="3" /> 2.然后再建立你想在ListView 或者是 GrideView 放的控件,独立的 xml 文件 eg: android:id="@+id/imgs" android:layout_width="150dp" android:layout_height="150dp" android:scaleType="fitXY" /> android:id="@+id/name" android:layout_width="150dp" android:layout_height="wrap_content" android:text="测试" android:gravity="center" /> 3. 建立一个包，这个包里放置 一个 自己 封装的Adapter 和 一个 GrideActivity 自己封装 Adapter 1. 继承 BaseAdapter 2. 实例化 LayoutInflater 对象，以便动态载入 xml布局 3. 获得 LayoutInflater 实例 4. 创建 Holder 来加载缓存视图 5. 实例化 LayoutInflater 对象·inflater 是用来找 res/layout 下的 xml 布局文件，并且实例化； 6. 创建 holde对象，来找到视图中的id 7. convertView.setTag(holder); 8. 最后给控件赋值 public class MyGridViewAdapter extends BaseAdapter { Context mContext; // 实例化 LayoutInflater 对象，以便动态载入 xml布局 private LayoutInflater mInflater; public MyGridViewAdapter(Context context){ this.mContext = context; // 获得 LayoutInflater 实例 mInflater = LayoutInflater.from(context); } @Override public int getCount() { return 10; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { Holder holder = null; if (convertView == null) { convertView = mInflater.inflate(R.layout.activity_grideview_item,null); holder = new Holder(); holder.img = (ImageView) convertView.findViewById(R.id.imgs); holder.text = (TextView) convertView.findViewById(R.id.name); convertView.setTag(holder); } else { holder = (Holder) convertView.getTag(); } holder.text.setText("小红"); Glide.with(mContext).load("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3728935550,1593997461&fm=26&gp=0.jpg").into(holder.img); return convertView; } static class Holder { public ImageView img; public TextView text; } } GrideActivity 中的代码 1. 申明控件 2. 设置适配器 setAdapter(new MyGridViewAdapter(GradeActivity.this)) 3. 可以通过setOnItemClickListener(new AdapterView.OnItemClickListener()） 监听点击的哪一项 public class GradeActivity extends AppCompatActivity { private GridView mGrid; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_grade); mGrid = (GridView) findViewById(R.id.grade_1); mGrid.setAdapter(new MyGridViewAdapter(GradeActivity.this)); mGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { Toast.makeText(GradeActivity.this,"你单击的是"+position,Toast.LENGTH_LONG).show(); } }); } } WebView 用来加载网页 加载静态资源Web 效果如下 Web管理端**** 结束语 这就是最近学习的干货。学习Android的伙伴朋友们，这份是你学习Android控件的宝典干货，可以快速整体的对Android 控件有个认知。学完上面的内容你就可模仿例如做个QQ 或者 微信端的 纯静态 没数据的APP，是不是很酷。如果做出第一APP时，你会很激动，才有继续学下去的动力。 觉得文章不错的，可以分享转发朋友圈哦！ 推荐历史文章 技术方向选型 十月份复盘总结