Android开发之UI

最新推荐文章于 2025-03-11 15:27:15 发布

安卓飞

最新推荐文章于 2025-03-11 15:27:15 发布

阅读量722

点赞数

分类专栏： android基础文章标签： ui android开发

本文链接：https://blog.youkuaiyun.com/anwanfei/article/details/76572835

版权

android基础专栏收录该内容

7 篇文章

订阅专栏

###Android开发之UI

UI（User interface）概念

1、组成：android中UI通过 View （组件）和ViewGroup（容器）组成

2、层级结构

这里写图片描述

3、组件不能包含其他的东西的，容器是里面可以包含组件或容器

一、布局

1、线性布局LinearLayout
android:gravity 指定文字在控件中的对齐方式
android:layout_gravity: 指定控件在布局中的对齐方式
android:layout_weight: 按比例分配控件大小

2、相对布局RelativeLayout

3、帧布局FrameLayout
4、百分比布局

出现原因：

Linerlayout可以按照比例指定控件大小，而RelativeLayout和Framelayout无法实现，故出现了百分比布局PercentRelativeLayout和PercentFrameLayout，他们是针对RelativeLayout和Framelayout的扩展，这样就可以轻松实现按照比例指定他们的大小

使用

1.添加依赖compile 'com.android.support:percent:26.+'
2.具体使用

PercentFrameLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.yunjiai.admin.anfly.MainActivity">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|top"
        android:text="开启服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:text="停止服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/bindService"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center|left"
        android:text="绑定服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/unbindService"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/bindService"
        android:layout_centerInParent="true"
        android:layout_gravity="center|right"
        android:text="解绑服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />

    <Button
        android:id="@+id/btn_map"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:text="map"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%" />

</android.support.percent.PercentFrameLayout>

PercentRelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context="com.yunjiai.admin.anfly.MainActivity">

    <Button
        android:id="@+id/btn_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开启服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

    <Button
        android:id="@+id/btn_stop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_gravity="top|right"
        android:text="停止服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

    <Button
        android:id="@+id/bindService"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_stop"
        android:text="绑定服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

    <Button
        android:id="@+id/unbindService"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/btn_stop"
        android:text="解绑服务"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

    <Button
        android:id="@+id/btn_map"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/unbindService"
        android:text="map"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="40%" />

</android.support.percent.PercentRelativeLayout>

5、约束布局
6、表格布局TableLayout

android:layout_span=”2” 将两列合并为一列

在TableRow中无法指定控件的宽度，通过android:stretchColumns=”1”，指定将第二列拉伸到最大。

7、网格布局GridLayout
8、绝对布局AbsoluteLayout

还以用张洪祥的androidAndroidAutoLayout
二、常用控件

1、textview

text 显示的文本
textSize 文本大小
textColor 文本颜色
maxLines 最大行数
singleLine 是否单行显示
ellipsize  实现跑马灯，多余文字显示成...
ellipsize("middle")--一行中间有三个点；ellipsize("start")--一行开头有三个点；ellipsize("marquee")+focus+运行程序，实现跑马灯drawableLeft/drawableRight 显示图标
textscale：字间距
lineSpacingMultipier：行间距

显示HTML格式的数据：textview.settext(HTML.fromHtml(Stirng));

图文混排的实现：①SpannableStringBulder②Html.fromHtml(sb.tostring(),imageGetter,null);

设置下划线：①textview.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG);

drawableleft功能：
设置图片的大小：
Drawable drawable1 = getResources().getDrawable(R.drawable.login_user); drawable1.setBounds(0, 0, 40, 40);//第一0是距左边距离，第二0是距上边距离，40分别是长宽 editText1.setCompoundDrawables(drawable1, null, null, null);//只放左边

TextView设置跑马灯必备属性：

android:ellipsize="marquee"
android:focusable="true"
android:singleLine="true"
android:marqueeRepeatLimit="marquee_forever"
android:focusableInTouchMode="true"

2、edittext

①TextView的子类
②hint 提示文字
③inputType 输入类型，可以设置成密码。inputType=“textPassword”
这里写图片描述
④addTextChangedListener在Editext有变化的时候的监听
⑤et.requestFocus();//获取焦点光标出现
⑥mEditText.clearFocus();//失去焦点
⑦监听edittext焦点变化，当焦点获取后hasFocus为ture

etSearch.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean hasFocus) {
                if (hasFocus) {
                    // 此处为得到焦点时的处理内容 
                } else {
                    // 此处为失去焦点时的处理内容
                }
            }
        });

⑦在xml中控制光标的android:cursorVisible="true" true为显示，false为隐藏
⑧不自动获取焦点：父级控件上设置android:focusableInTouchMode="true"
⑨设置光标颜色：android:textCursorDrawable="#ff2244"
如果想让光标颜色和字体颜色一样：android:textCursorDrawable="@null"

3、Button

textview的子类

4、Imageview
ImageView：src 图片

加载文件中的图片:

File file  = new File(path);
if(file.exists()){
      	 Bitmap bm = BitmapFactory.decodeFile(path);
       	img.setImageBitmap(bm);
}

5、Radiogroup
作用：将多个RadioButton组成一组，里面的单选按钮只能选一个
属性：orientation
方法：getCheckedRadioButtonId
监听器：OncheckedChangeListener，选择内部的RadioButton

设置Android中RadioButton的图片大小和位置（TextView一样）：http://blog.youkuaiyun.com/weixin_36723200/article/details/53577015

6、radiobutton

特点：一组单选按钮只能选一个，通过RadioGroup包起来，通常要和RadioGroup配合使用
属性：

text  显示的文本
checked 默认是否选中 ：true | false
button="@null"：隐藏小圆点
OncheckedChangeListener：监听器

7、CheckBox

特点：一组复选框可以选多个
属性：

text  显示的文本
checked 默认是否选中 ：true | false

可以实现按钮两种颜色切换，不是点击后手指离开即恢复原来颜色，是改变

<CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/selector_test" />
        
//选择器
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_published_tab" android:state_checked="true" />
    <item android:drawable="@drawable/ic_publish_tab"  android:state_checked="false" />
</selector>

8、listview

9、GridView

10、scrollview

11、recyclerview

12、ExpandableListView

13、switch

14、FloatingActionButton

15、DatePicker

16、TimePicker

17、pickerMum

18、cartview

19、webview

20、对话框

设置对话框在activity的位置
Dialog dialog = new Dialog(this);
dialog.setContentView(R.layout.dialog_layout);
dialog.setTitle(“Custom Dialog”);

//获得当前窗体
Window window = dialog.getWindow();

//重新设置
WindowManager.LayoutParams lp = window .getAttributes();
window .setGravity(Gravity.LEFT | Gravity.TOP);
lp.x = 100; // 新位置X坐标
lp.y = 100; // 新位置Y坐标
lp.width = 300; // 宽度
lp.height = 300; // 高度
lp.alpha = 0.7f; // 透明度

// dialog.onWindowAttributesChanged(lp);
//(当Window的Attributes改变时系统会调用此函数)
window .setAttributes(lp);
dialog.show();

21、进度条

22、侧滑菜单

23、seekbar
http://blog.youkuaiyun.com/jiang_rong_tao/article/details/60141198

24、viewpager

25、tablayout

26、toggleButton

27、AutoCompleteTextView自动完成功能的可编辑文本控件

28、MultiAutoCompleteTextView支持自动完成功能的可编辑文本控件，允许输入多值（多值之间会自动地用指定的分隔符分开）

29、ZoomControls-放大/缩小钮控件

30、Include-整合控件

31、VideoView

32、VideoView视频播放控件

33、mediaplayer

34、RatingBar-评分控件

35、Spinner下拉框控件

36、Chronometer计时器控件

37、CountDownTimer

三、自定义view

四、样式和主题

作用：
①实现属性的复用
②实现风格的统一
③容易修改，容易维护

**1、样式：**用于设置组件的风格

使用步骤：
①在res/values/styles.xml定义样式

	<style name="">
		<item name="属性名">属性值</item>
	</style>

②在布局xml中引用

<组件标签
		style="@style/xx"
	/>

**2、主题：**用于设置Activity界面的风格

使用步骤
①在res/values/styles.xml定义样式

<style name="" parent="">
	<item name="属性名">属性值</item>
</style>

②在清单列表中引用

<activity
		theme="@style/xx"
	/>

五、屏幕适配

1、基本概念