Layout + Basic UI

Common layout relativelayout (relative layout)

• Positioning relative to the parent layout

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

• Use as top (bottom) + left or right

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

• Relative controls are positioned

  • Android:layout_above on top of control
  • Android:layout_below located under control
  • Android:layout_toleftof on the left side of the control
  • Android:layout_torightof on the right side of the control

LinearLayout (Linear layout)

• LinearLayout Orientation Alignment Horizontal horizontal (default) Vertical Vertical
  
  • (horizontal) Horizontal layout internal controls cannot define widths as Match_parent
  • (vertical) Vertical layout Internal controls cannot define heights as Match_parent

• Android:layout_weight sets a property that allows you to specify the size of the control in a proportional manner.

  • Very important in the adaptation of the phone screen
  • Specifies the width of the control as 0DP, and the Android:layout_weight property is specified as 1, which means that the control will split the width horizontally
  • Set to 1 means all stations One-second
    
    • If EditText's android:layout_weight=3
    • Button android:layout_weight=2
    • That is, EditText is three-fifths button two-fifths

• Specifies the properties of the andorid:layout_weight of the edittext and changes the width of the button back to wrap_content, which means that the width of the button is calculated as Wrap_content. And EditText will fill the screen with the rest of the space.

Tablelayout (Table layout)

• TableRow means that a row is added to the table, and each control in the TableRow represents a column

  • The control in TableRow is not a width-specific
  • The value of the Android:inputtype property is Textpassword, which is specified as the Password entry box
  • android:layout_span= "2" means spanning two columns
  • The Android:stretchconlumns property represents an extruded column that can be used to automatically adapt to the screen width

Common UI components and modifier text button input boxes

• Button,edittext all inherit from 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"     //字符长度/>

Non-selection box ToggleButton

*

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

• Radio button RadioButton

    <radiobutton android:id= "@+id/rb_a" android:layout_width= "Wrap_conte NT "android:layout_height=" Wrap_content "android:text=" apple "/><radiobutton android:id=" @+id/rb_b "Androi D:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "Watermelon"/><radiobutton Androi D:id= "@+id/rb_c" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "Pineapple"/>  

• Multiple marquee checkbox

    <checkbox android:id= "@+id/cbx_a" android:layout_width= "WR Ap_content "android:layout_height=" wrap_content "android:text=" apple "/><checkbox android:id=" @+id/cbx_b "a Ndroid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "Banana"/><Buttonandroid: Layout_width= "Wrap_content" android:layout_height= "wrap_content" android:onclick= "MyClick"//Add Click event android:text= " OK "/>  

Progress bar ProgressBar

• Progress bar with no progress

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

• A progress bar that is progressing

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

• Draggable progress bar SeekBar

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

• Star Progress bar Ratingbar

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

Picture Control ImageView

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

Slide Control ScrollView

• ScrollView Vertical Slide
• Horizontalscrollview Horizontal Slide
• ScrollView and Horizntalscrollview can only choose one
• ScrollBars style of scroll bar

• <scrollview//Vertical slide Horizontalscrollview is horizontal slide android:layout_width= "match_parent" android:layout_height= "Match_ Parent "android:scrollbars=" none "//scroll bar ><linearlayout android:layout_width=" Match_parent "Android:layout_ height= "match_parent" android:orientation= "vertical" >//Vertical layout <textview android:layout_width= "WR Ap_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"/>//font size <textview android:layout_width= "Wrap_content" Android:la yout_height= "Wrap_content" android:textcolor= "#F00"//Font Color android:text= "Hello world! Hello world! Hello world! Hello world! Hello world!        Hello world! " Android:textsize= "90SP"/></linearlayout>

Shapedrawable

Purpose: The background of the input box button for rounded corners

• 1: Create the Drawable folder

• 2: Create shape file, file name = Business Name _ Control name abbreviation _BG

  Add to Button background

  //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" //设置圆角     />

  Add to text box

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

• 3: Apply to the control

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

Selectordrawable

Selector: If you want to change the background of a control in a certain state, you need to use selectordrawable.

• 1: Create the Drawable folder

• 2: Create a selector file

  <?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>

  Change the font color after the button is clicked, and the background color

  1: Create selector file (font color) under the Drawable folder

  <?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: Create a colors file under the Values folder

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

  Change the background color after button click

  <?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

Change the background of the progress bar layerlistdrawable

• 1: Create the Drawable folder

• 1: Create a layerlist file

    <?xml version= "1.0" encoding= "Utf-8"? ><layer-list xmlns:android= " Http://schemas.android.com/apk/res/android "> <!--set a picture of the progress of a background map--<!--in the order of the background image placed on the top progress of the picture is placed below-- > <!--ID is to tell the system where we want to put the picture--<item android:drawable= "@drawable/progress_bar_bg" android:id= "@andr Oid:id/background "/> <item android:drawable=" @drawable/progress_bar_selected_bg "android:id=" @android: ID/ Progress "/></LAYER-LIST>  

• 3: Apply to Controls

  <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

Layout + Basic UI