戳蓝字“前端自学社区”关注我们哦，后续更新更多干货
· 前· 言 ·
“最近报名了一个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中的
<RadioGroup
android:id="@+id/r1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RadioButton
android:id="@+id/man"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"
android:checked="true"
/>
<RadioButton
android:id="@+id/girl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"
/>
</RadioGroup>
自定义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
<use-permission android:name="android.permission.INTERNET"/>
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：
<GridView
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:
<ImageView
android:id="@+id/imgs"
android:layout_width="150dp"
android:layout_height="150dp"
android:scaleType="fitXY"
/>
<TextView
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时，你会很激动，才有继续学下去的动力。
觉得文章不错的，可以分享转发朋友圈哦！
推荐历史文章