布局+基本UI

最新推荐文章于 2024-07-18 11:11:53 发布

不弃不馁

最新推荐文章于 2024-07-18 11:11:53 发布

阅读量965

点赞数

分类专栏： Android 文章标签： android 布局

本文链接：https://blog.csdn.net/android_lhy/article/details/51354332

版权

Android 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

常见布局

RelativeLayout(相对布局)

相对于父布局进行定位

 android:layout_centerHorizontal    横向居中
 android:layout_centerVertical      纵向居中
 android:layout_centerInParent      横向纵向居中

使用方式为上(下)+左或右

    android:layout_alignParentTop       上
    android:layout_alignParentButton    下
    android:layout_alignParentLeft      左
    android:layout_alignParentRight     右
    adnroid:layout_centerInParent       居中

相对控件进行定位
- android:layout_above 位于控件上方
- android:layout_below 位于控件下方
- android:layout_toLeftOf 位于控件左侧
- android:layout_toRightOf 位于控件右侧

LinearLayout(线性布局)

linearLayout的orientation排列方向 horizontal水平(默认) vertical垂直
- (horizontal)水平布局内部控件不能将宽度定义为match_parent
- (vertical)垂直布局内部控件不能将高度定义为match_parent
android:layout_weight设个属性允许使用比例的方式来指定控件的大小,
- 在手机屏幕的适配性方面非常重要
- 将控件的宽度指定为0dp, android:layout_weight的属性指定为1,这表示控件将在水平方向平分宽度
- 设置为1 表示都站二分之一
  - 如果Edittext的 android:layout_weight=3
  - Button android:layout_weight=2
  - 则表示EditText占五分之三 Button占五分之二
指定EditText的andorid:layout_weight的属性 ,并将Button的宽度改回wrap_content,这表示Button的宽度按照wrap_content计算,而EditText将会占满屏幕的剩余空间

TableLayout(表格布局)

TableRow表示在表格中添加一行,在TableRow中的每个控件就表示一列
- TableRow中的控件是不能指定宽度的
- android:inputType属性的值为textPassword,指定为密码输入框
- android:layout_span=”2”表示跨越两列
- android:stretchConlumns属性表示拉伸列,可以起到自动适应屏幕宽度的作用

常见UI组件和修饰

文本按钮输入框

Button,EditText都继承于TextView

TextView

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="myClick"  //设置点击事件方法
    android:clickable="true"   //支持点击事件
    android:text="我是一个文本" //显示文本
    android:background="#F00" //文本背景
    android:textSize="18sp"   //字体大小
    android:textColor="#FF0"  //字体颜色
    android:textStyle="bold|italic"//字体加粗
    android:lines="3"         //所占行数
    android:singleLine="true" //只显示在一行
/>

EditText

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="hello"      //提示内容
    android:editable="false"  //是否可以编辑
    android:inputType="number"//输入的类型
    android:maxLength="5"     //字符长度
/>

是非选择框 ToggleButton

    <ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"
    android:textOn="开文本内容"
    android:textOff="关文本内容"
     />

单选按钮 RadioButton

<RadioButton
     android:id="@+id/rb_a"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="苹果" 
/>
<RadioButton 
    android:id="@+id/rb_b"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="西瓜"
 />
<RadioButton 
    android:id="@+id/rb_c"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="菠萝"
 />

多选框 CheckBox

 <CheckBox
    android:id="@+id/cbx_a"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="苹果"
 />

<CheckBox
    android:id="@+id/cbx_b"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="香蕉"
 />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="myClick"   //添加点击事件
android:text="确定"  
 />

进度条 ProgressBar

没有进度的进度条

<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleLarge"//大的进度条
style="?android:attr/progressBarStyleSmall"//小的进度条
/>

　有进度的进度条　

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"    //设置有进度的进度条
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="150"   //最大进度
android:progress="50" //当前进度
 />

可拖动的进度条 SeekBar

<SeekBar 
android:layout_width="200dp"
android:layout_height="wrap_content"
android:max="100"   //最大进度
android:progress="30"  //当前进度
/>

　星星进度条　RatingBar

<RatingBar
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:numStars="6"     //显示星星个数
   android:rating="3.5"     //默认进度
   android:stepSize="0.3"   //可调最小进度
    />

图片控件 ImageView

<ImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="#F00"
    android:scaleType="matrix"  //设置图片的缩放模式
    android:src="@drawable/flower"
 />

滑动控件 ScrollView

ScrollView 垂直滑动
HorizontalScrollView 水平滑动
ScrollView和HorizntalScrollView只可以二选一
scrollbars 滚动条的样式

<ScrollView //垂直滑动  HorizontalScrollView是水平滑动 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" //滚动条
>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >        //垂直布局
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!"
        android:textSize="60sp" />          //字体大小

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#F00"            //字体颜色
        android:text="Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!"
        android:textSize="90sp" />
</LinearLayout>

ShapeDrawable

用途：圆角的输入框按钮的背景

1:创建drawable文件夹

2:创建shape文件,文件名=业务名_控件名缩写_bg

//添加到按钮背景

//stroke  边
<stroke android:width="0.5dp"   //width边的粗细程度
    android:color="#FAAA"   //color边的颜色
    />
//gradient  渐变色 
 <gradient android:startColor="#FF0"  
      android:endColor="#0FF"   
      android:angle="45"    //渐变的角度
      />
  <corners android:radius="5dp" //设置圆角
     />

//添加到文本框

<stroke android:width="2dp"     android:color="#F888"/>
<solid android:color="#FFFF"/>  //solid实体颜色
<corners android:radius="5dp"/>

3:应用到控件上

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/et_bg_shap" //引入控件
 />

SelectorDrawable

Selector: 如果想改变某个控件在某种状态下的背景就需要使用SelectorDrawable.

1:创建drawable文件夹

2:创建Selector文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 设置两种不同状态的图片  -->
    <!-- state_pressed修改为true,按下的图片 -->
    <item android:state_pressed="true" android:drawable="@drawable/pressed" />
    <!-- 默认图片 默认情况下不需要设置状态 -->
<item android:drawable="@drawable/normal"/>
</selector>

//改变按钮点击后的字体颜色,以及背景颜色

1:在drawable文件夹下创建selector文件 (字体颜色)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- android:color 字体的颜色 系统没有提示  -->
    <!-- 有些系统在显示的时候会报错 这里不能直接写颜色值 需要把颜色值放到res/values/colors.xml-->
    <item android:state_pressed="true" android:color="@color/btn_txt_pressed"/>
<item android:color="@color/btn_txt_normal"/>
</selector>

2:在values文件夹下创建colors文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="btn_txt_normal">#0F0</color>
    <color name="btn_txt_pressed">#F00</color>
</resources>

//改变按钮点击后的背景颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- item里面嵌套shap -->
<!-- 按下的背景图 -->
<item android:state_pressed="true" >
    <shape >
        <!-- 背景颜色 -->
        <solid android:color="#FF0" /> 
        <!-- 背景圆角 -->
        <corners android:radius="5dp"/>
    </shape>
</item>
<!-- 默认背景图 -->
<item>
    <shape >
        <solid android:color="#888" />
        <corners android:radius="5dp"/>
    </shape>
    </item>
</selector>

LayerlistDrawable

改变进度条的背景 LayerlistDrawable

1:创建drawable文件夹

1:创建Layerlist文件

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 设置一个背景图  设置进度的图片-->
    <!-- 有顺序之分 背景图 放在最上面 进度的图片放在下面 -->
    <!-- id 是为了告诉系统 我们想将图片放到什么地方去 -->
    <item android:drawable="@drawable/progress_bar_bg" android:id="@android:id/background"/>
    <item android:drawable="@drawable/progress_bar_selected_bg" android:id="@android:id/progress"/>
</layer-list>

3:应用到控件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<!-- progressDrawable 设置进度条背景 -->
<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="150"
    android:progress="35"
    android:progressDrawable="@drawable/pb_bg"  />

</RelativeLayout>