布局+基本UI

常见布局

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>

NinePatch

时间： 2024-08-05 19:34:22

布局+基本UI的相关文章

Android的UI调优

对于一个App的UI而言,在流畅性上的改进目标其实就是降低屏幕绘制的延迟,创建流畅和稳定的帧率以避免卡顿. 在理想情况下,全部的测量.布局和绘制的时间最好在16ms以内,这样才能保证屏幕运行的顺畅性.而如何对屏幕渲染和UI性能进行评估和分析呢,在Android SDK中集成了一些工具用来策略APP的渲染性能问题. 一.视图的层级分析: 对于每一个视图而言,都需要经过三个步骤:测量.布局和渲染.而App如何绘制视图,它需要从顶部节点开始测量,沿着布局树逐个渲染,视图树的层级越多,嵌套测量的次数越多

Hybird框架UI重构之路：四、分而治之

上文回顾:Hybird框架UI重构之路:三.工欲善其事,必先利其器 上一篇文章有说到less.grunt这两个工具,是为了css.js分模块使用的.UI框架提供给使用者的时候,是一个大的xxx.js.xxx.css,但在开发时候,必须划分模块. CSS模块划分 1.variables.less 这里面是一些样式的变量.函数 例: 字体: @baseFontSize: 20px; 圆角: .rounded-corners (@radius: 5px) { border-radius: @radiu

android-wear开发之定义布局

Android Wear使用跟手机一样的布局技术,但需要对特定情况进行设计.不要把手机的UI直接照搬过来.更多可查看:Android Wear Design Guidelines 当创建android wear布局的时候,要考虑设备有两种屏幕,方形和圆形.任何位于屏幕角落的内容都会被圆形屏幕裁剪掉. Wearable UI Library提供两种方式解决这个问题: 1.为圆形和方形屏幕的设备定义两套布局.在运行时检测设备屏幕并渲染不同的布局. 2.使用Wearable UI Library中一种

Android——控制UI界面

一.使用XML布局文件控制UI界面 res\layout\activity_main.xml代码如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/FrameLayout1" android:layout_width

【Android 初学】7、相对布局--初步入门

Start Android  1.什么是相对布局() 相对布局是另外一种控件的摆放的方式: 相对布局是通过指定当前控件与兄弟控件或是父控件之间的相对位置,从而达到控制控件位置的目的: 2.为什么要使用相对布局 相对布局的UI性能比线性布局(嵌套太多)更好: 3.相对布局的常用属性 RelativeLayout用到的一些重要的属性: 第一类:属性值为true或false     android:layout_centerHrizontal  水平居中     android:layout_cent

自适应XAML布局经验总结 （一）原则和页面结构设计

XAML布局回顾 Grid和StackPanel是核心布局,尤其以Grid最为重要. Grid是网格布局,XAML的设计者有可能参考了Html里的Table设计了Grid布局,但进行了改进.Html中的Table是tr套td,要想变动行列非常麻烦.XAML中的Grid使用的是指定行列序号和跨行跨列数的方式,修改起来灵活方便. Grid里行或列的大小有三种方式,一种方式是固定大小(Double值),一种方式是由里面的内容决定(Auto),一种方式是按比例分割剩余空间(Double值加*,剩余空间由

android基础（1）：控制UI界面

一:xml布局文件控制UI界面 activity_main.xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="

EEPlat PaaS平台的UI模型

         EEPlat PaaS平台开创性的利用HMVC模式组织用户界面.用户界面可以划分为多个部分,每个部分又可以划分为多个子部分,可以一直划分下去...... EEPlat PaaS平台对界面的这些部分进行了抽象出元模型,分别为面板元模型.表格元模型.表格元素元模型.菜单元模型.树元模型以及外部资源定义.面板为UI容器,可以包含面板.表格.菜单.树.资源.由于面板可以嵌套面板,所以可以形成复杂的界面布局.UI模型被显示时,需要定义控制器,控制器是EEPlat PaaS平台UI部分的核

30分钟掌握这8种页面布局

30分钟掌握这8种页面布局 学习UI设计的时候,经常要接触到页面的布局,布局的方式会直接影响一个APP的视觉效果,好的布局方式,往往能带来舒服的视觉效果,更能得到用户的接受与好评.然而万变不离其宗,移动端页面常用的布局,不外乎以下8种. 1.列表式布局 特点:内容从上向下排列,导航之间的跳转要回到初始点 优点: 1.层次展示清晰明了 2.视线流从上到下,浏览体验快捷 3.可展示内容较长的菜单或拥有次级文字内容的标题 缺点: 1.导航之间的跳转要回到初始点,灵活性不高 2.同级内容过多时,用户浏览