码迷,mamicode.com
首页 > 移动开发 > 详细

Android基础知识(1)——UI编程

时间:2016-06-21 06:53:50      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:

我学习android一段时间了,看着大牛们的各种神博客,心里也痒痒的,希望有一天也能成为他们一样。
我知道,这些都是一滴一滴的积累,所有我也需要找到我的学习方法,打好基础,做出属于我自己的成果。

当然,作为一名菜鸟程序员,更加要懂得把知识整理归类,方便记忆。
-----------------------------------------------------------

  在学校里听老师讲课,总会让学生误会程序员的主要工作不是界面美化,那都是美工做得事情。但随着移动开发的不断发展,在软件开发的过程中,界面设计和功能开发同样重要。界面美观的应用不仅可以大大增加用户粘性,还可以帮我们吸引更多新用户。如果善用UI控件,可以做出让人赏心悦目的应用。

  Android应用绝大部分UI组件都放在android.widget包及其子包、android.view包及其子包中,Android应用的所有UI都继承了View类。View类还有一个重要的子类,ViewGroup,但ViewGroup通常作为其他组件其他组件的容器使用。Android的所有UI组件都是建在View、ViewGroup基础之上,ViewGroup是View的子类,因此ViewGroup也可以被当成View使用。但由于ViewGroup是一个抽象类,因此实际使用中通常总是使用ViewGroup的子类来作为容器,例如各种布局管理器。



  1、布局管理器

  1.1 LinearLayout 线性布局

  LinearLayout  是最常用的布局,它会把容器里面的组件一个挨一个的排列起来,LinearLayout 可以控制各组件横纵向排列(通过android:orientation属性控制)。设置排列方式可以设置为 android:orientation="vertical" (垂直排列),android:orientation="horizontal"(水平排列)。还有一个XML属性是 android:gravity对齐方式,有很对齐方式。学习LinearLayout还有另外一个重要属性android:layout_weight,这个属性允许我们使用比例方式来指定控件的大小,在手机屏幕适配性方面起到非常重要的作用。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="vertical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮" />
</LinearLayout>

技术分享


  1.2 TableLayout  表格布局

TableLayout继承了LinearLayout,因此它的本质依然是线性布局管理器。表格布局采用行、列的形式来管理UI组件,TableLayout并不需要明确声明包含多少行多少列,而是通过添加TableRow来控制表格的行数和列数。每次向TableLayout中添加一个TableRow,该TableRow就是一个表格行。接下来示范:

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3" />
    </TableRow>
</TableLayout>

技术分享

TableLayout 还有三个属性需要认知,

  • android:collapseColumns(设置需要被隐藏列序号)
  • android:shrinkColumns(设置需要被收缩列序号)
  • android:stretchColumns(设置需要被拉伸列序号)

    1.3 FrameLayout  帧布局

FrameLayout  相对于其他布局管理器来说比较简单,但应用的场景也减少。FrameLayout直接继承了ViewGroup组件,为每个加入其中的组件创建一个空白区域,把组件一个个地叠加在一起。

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button" />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/a4"/>
    </FrameLayout>
技术分享

显然两个组件重叠在左上角,这种布局可能用到的地方可以不多。


  1.4 RelativeLayout相对布局

RelativeLayout也是一种比较常用布局,相对布局容器内子组件的位置总是相对于兄弟组件、父容器来决定的,因此这种布局方式被称为相对布局。

以下是只能设为boolean值得属性:

android:layout_centerHorizontal
控制该子组件是否位于布局容器的水平居中
android:layout_centerVertical
控制该子组件是否位于布局容器的垂直居中
android:layout_centerInParent
控制该子组件是否位于布局容器的中央位置
android:layout_alignParentTop 控制该子组件是否与布局容器顶端对齐
android:layout_alignParentBottom 控制该子组件是否与布局容器低端对齐
android:layout_alignParentLeft 控制该子组件是否与布局容器左端对齐
android:layout_alignParentRight 控制该子组件是否与布局容器右边对齐
以下只能设为其他UI组件ID的属性:

android:layout_above 控制该子组件位于给出ID组件的上方
android:layout_below 控制该子组件位于给出ID组件的下方
android:layout_toLeftOf 控制该子组件位于给出ID组件的左侧
android:layout_toRightOf
控制该子组件位于给出ID组件的右侧
android:layout_alighTop 控制该子组件与给出ID组件的上边界对齐
android:layout_alighBottom
控制该子组件与给出ID组件的下边界对齐
android:layout_alighLeft 控制该子组件与给出ID组件的左边界对齐
android:layout_alighRight
控制该子组件与给出ID组件的右边界对齐
【实例】梅花布局效果:
技术分享

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--定义按钮Bt1位于父容器中间-->
        <Button
            android:id="@+id/bt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="按钮1" />
        <!--定义Bt2位于按钮Bt1上方-->
        <Button  
            android:id="@+id/bt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/bt1"
            android:layout_alignLeft="@id/bt1"
            android:text="按钮2" />
        <!--定义Bt3位于按钮Bt1下方-->
        <Button
            android:id="@+id/bt3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/bt1"
            android:layout_alignLeft="@id/bt1"
            android:text="按钮3" />
        <!--定义Bt4位于按钮Bt1左方-->
        <Button
            android:id="@+id/bt4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/bt1"
            android:layout_alignTop="@id/bt1"
            android:text="按钮4" />
        <!--定义Bt2位于按钮Bt1右方-->
        <Button
            android:id="@+id/bt5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/bt1"
            android:layout_toRightOf="@id/bt1"
            android:text="按钮5" />
    </RelativeLayout>

  1.5 GridLayout  网格布局

GridLayout的作用类似于HTML中的Table标签,它把整个容器划分成rows*columns个网格,每个网格可以放置一个组件。除此之外也可以设置一个组件横跨多少列、纵跨多少行。

首先要说的是GridLayout与LinearLayout布局一样,也分为水平和垂直两种方式,默认是水平布局:

android:orientation horizontal  水平
vertical 垂直

第二就是GridLayout的属性:

android:rowCount 设置该网格的列数量
android:columnCount 设置该网格的行数量
android:layout_rowSpan 设置该子组件在容器纵跨几行
android:layout_columnSpan 设置该子组件在容器横跨几行

【实例】计算器界面:

技术分享

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6">

    <TextView
        android:layout_columnSpan="4"
        android:layout_gravity="fill"
        android:background="#000"
        android:gravity="right"
        android:text="0"
        android:textColor="#fff"
        android:textSize="80dp" />
    <Button
        android:id="@+id/bt1"
        android:text="AC" />
    <Button
        android:id="@+id/bt2"
        android:text="+/-" />
    <Button
        android:id="@+id/bt3"
        android:text="%" />
    <Button
        android:id="@+id/bt4"
        android:text="+" />
    <Button
        android:id="@+id/bt5"
        android:text="7" />
    <Button
        android:id="@+id/bt6"
        android:text="8" />
    <Button
        android:id="@+id/bt7"
        android:text="9" />
    <Button
        android:id="@+id/bt8"
        android:text=" - " />
    <Button
        android:id="@+id/bt9"
        android:text="4" />
    <Button
        android:id="@+id/bt10"
        android:text="5" />
    <Button
        android:id="@+id/bt11"
        android:text="6" />
    <Button
        android:id="@+id/bt12"
        android:text="*" />
    <Button
        android:id="@+id/bt13"
        android:text="1" />
    <Button
        android:id="@+id/bt14"
        android:text="2" />
    <Button
        android:id="@+id/bt15"
        android:text="3" />
    <Button
        android:id="@+id/bt16"
        android:text="/" />
    <Button
        android:id="@+id/bt17"
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="0" />
    <Button
        android:id="@+id/bt18"
        android:text="." />
    <Button
        android:id="@+id/bt19"
        android:text="=" />
</GridLayout>
当0需要横跨2列时

        android:layout_columnSpan="2"
        android:layout_gravity="fill"

  1.6 AbsoluteLayout绝对布局

       AbsoluteLayout绝对布局犹如div指定了absolute属性,用X,Y坐标来指定元素的位置!
  该布局目前已经淘汰,知道就行了!
-----------------------------------------------------

  2、常用控件的使用方法

  2.1 TextView文本框

TextView是Android中最简单的控件,它主要用于界面显示一段文本信息,有点类似Swing编程中的JLabel,但又比JLabel强大。还有些 样式、文本转换autoLink和autoText、文本超长ellipsize等等不一一多说。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text" />
</LinearLayout>

  2.2 EditText编辑框

  EditText 是程序中用于和用户进行交互十分重要的控件,它允许用户在控件里输入和编辑内容,应用的场景最常见就是输入账号密码。

  EditText 与 TextView非常相似,他甚至与TextView共用了绝大部分XML属性和方法,他们之间最大的区别就是:EditText 可以接受用户的输入。

  • android:hint:指定编辑框的提示信息;
  • android:inputType:指定编辑框输入内容的类型(textPassword、numberPassword、number、date、phone、text)

【实例】简单登录界面

技术分享

账号密码同样输入songsong123时在密码框就会显示点点,这是android:inputType的功能。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入账号"
        android:id="@+id/editText" />
    <EditText
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码"
        android:id="@+id/editText2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登  录"
        android:textAllCaps="false"
        android:id="@+id/button" />
</LinearLayout>
EditText  还有另外一种情况就是随着输入内容越来越多,EditText在界面中会被不断拉长,导致界面变得非常凌乱,这时我们就应该使用android:maxLines来限制布局走形的情况出现。或者使用 android:maxLength来限制字数都可以达到目的。

        android:maxLines="1"
        android:maxLength="10"

  2.3 Button按钮

Button是程序用于和用户交互的一个重要控件,Button继承了TextView。它主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,就会触发onClick时间。

实例依然是刚刚那个:

<span style="font-size:12px;">    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="登  录"
        android:textAllCaps="false"
        android:id="@+id/button" /></span>
在Java代码中:
public class MainActivity extends Activity {

    private Button button;
    private EditText editText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.text4);

        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editText);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String str = editText.getText().toString();
                Toast.makeText(getApplicationContext(), str, Toast.LENGTH_SHORT).show();
            }
        });
} 
技术分享

  2.4 ImageView图片

ImageView是继承自View组件,主要功能不仅用于显示ImageView,而且还可以显示任何Drawable对象。

  <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/a4"/>

ImageView所支持的android:scaleType属性可指定如下属性

  •     fitXY:拉伸图片(不按比例)以填充View的宽高。
  •     fitStart:按比例拉伸图片,拉伸后图片的高度为View的高度,且显示在View的左边。
  •     fitCenter:按比例拉伸图片,拉伸后图片的高度为View的高度,且显示在View的中间。
  •     fitEnd:按比例拉伸图片,拉伸后图片的高度为View的高度,且显示在View的右边。
  •     center:按原图大小显示图片,但图片宽高大于View的宽高时,截图图片中间部分显示。
  •     centerCrop:按比例放大原图直至等于某边View的宽高显示。
  •     centerInside:当原图宽高或等于View的宽高时,按原图大小居中显示;反之将原图缩放至View的宽高居中显示。

【实例】图片的动态切换:

技术分享

通过单击ImageView的setImageResource()方法动态完成切换图片:

public class MainActivity extends ActionBarActivity {

    int[] images = new int[]{
            R.drawable.img1,
            R.drawable.img2,
            R.drawable.img3,
    };
    private ImageView img1;
    int currentImg = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img1 = (ImageView) findViewById(R.id.img1);
        img1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                img1.setImageResource(images[++currentImg % images.length]);
            }
        });
    }

  2.5 RadioButton单选按钮 和 CheckBox复选框

RadioButton和CheckBox是用户界面中最普通的UI控件,他们都继承了Button类,因此都可直接调用Button支持的各种属性和方法。RadioButton和CheckBox和普通Button不同的是他们多了个可选中的功能android:checked属性。RadioButton和CheckBox的不同点在于一组RadioButton只能选中一个,因此RadioButton通常要与RadioGroup一起使用,用于一组单选按钮。

【实例】获取用户信息的简单实例:

技术分享

界面布局代码:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="songsong.com.imageviewtext.MainActivity2">

   <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="性别:" />
    <RadioGroup
        android:id="@+id/rg1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/male"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="男" />
        <RadioButton
            android:id="@+id/female"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女" />
    </RadioGroup>
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="喜欢的颜色:" />
    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="红色" />
    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="蓝色" />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="性别为男"/>
    <TextView
        android:id="@+id/tv4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="喜欢的颜色是:"/>
</LinearLayout>
java代码为:
public class MainActivity2 extends ActionBarActivity {

    RadioGroup radioGroup;
    TextView show;
    CheckBox checkBox1;
    CheckBox checkBox2;
    TextView showbox;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        radioGroup = (RadioGroup) findViewById(R.id.rg1);
        show = (TextView) findViewById(R.id.tv3);

        checkBox1 = (CheckBox) findViewById(R.id.checkBox1);
        checkBox2 = (CheckBox) findViewById(R.id.checkBox2);
        showbox = (TextView) findViewById(R.id.tv4);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                String tip = checkedId == R.id.male ? "性别为男" : "性别为女";
                show.setText(tip);
            }
        });
        checkBox1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    String str = showbox.getText().toString();
                    showbox.setText(str + checkBox1.getText().toString());
                }
            }
        });
        checkBox2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    String str = showbox.getText().toString();
                    showbox.setText(str + checkBox2.getText().toString());
                }
            }
        });

    }
}

  

  2.6 ProgressBar进度条

 进度条也是UI界面中一种非常实用的空间,通常用于向用户显示某些耗时操作完成的百分比。进度条可以动态显示进度,因此避免长时间执行某个耗时操作时,让用户感觉程序失去了响应,从而更好提高用户的友好性。

通过style属性可以为ProgressBar指定风格:

  • @android:style/Widget.ProgressBar.Horizontal:水平进度条
  • @android:style/widget.ProgressBar.Inverse:普通大小的环形进度条
  • @android:style/widget.ProgressBar.Large:大环形进度条
  • @android:style/widget.ProgressBar.Large.Inverse:大环形进度条
  • @android:style/widget.ProgressBar.Small:小环形进度条
  • @android:style/widget.ProgressBar.Small.Inverse:小环形进度条

ProgressBar常用的XML属性:

  • android:max:设置该进度条的最大值
  • style:样式
  • android:progress:设置该进度条已完成进度值

<span style="font-size:12px;"><LinearLayout 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"
    android:orientation="vertical"
    tools:context="songsong.com.imageviewtext.ProgressBarText">
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progressBar" />
</LinearLayout></span>
【实例】最简单的ProgressBar的布局:
技术分享


当数据加载完成时,我们就需要另外一个属性android:visibility进行指定

  • visible:可见的,这是默认值;
  • invisible:不可见的,仍然占据着原来位置和大小;
  • gone:不仅不可见,而且不再占用任何屏幕空间;

也可以在代码中设置setVisibiliy():

  • View.VISIBLE
  • View.INVISIBLE
  • View.GONE

【实例】ProgressBar进度条隐藏

技术分享

<span style="font-size:12px;"><LinearLayout 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"
    android:orientation="vertical"
    tools:context="songsong.com.imageviewtext.ProgressBarText">

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:id="@+id/probar2" />
    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GONE隐藏/显示"/>
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="增加进度"/>
</LinearLayout></span>
java文件的代码:

<span style="font-size:12px;">public class ProgressBarText extends ActionBarActivity {
    ProgressBar progressBar;
    Button bt1;
    Button bt2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar_text);
        progressBar = (ProgressBar) findViewById(R.id.probar2);
        bt1 = (Button) findViewById(R.id.bt1);
        bt2 = (Button) findViewById(R.id.bt2);
        bt1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }
            }
        });
        bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int progress = progressBar.getProgress();
                if (progress>=100){
                    progressBar.setVisibility(View.GONE);
                    Toast.makeText(getApplicationContext(),"加载完成",Toast.LENGTH_SHORT).show();
                }else {
                    progress = progress + 10;
                    progressBar.setProgress(progress);
                }
            }
        });
    }
}</span>
【实例】显示在标题上的进度条

<span style="font-size:12px;">public class TitleProgressBar extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置窗口特征:启用显示进度的进度条
        requestWindowFeature(Window.FEATURE_PROGRESS);  //①
        //设置窗口特征:启用不显示进度的进度条
//		requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS); //②
        setContentView(R.layout.activity_title_progress_bar);

        Button bn1 = (Button) findViewById(R.id.bn1);
        Button bn2 = (Button) findViewById(R.id.bn2);

        bn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setProgressBarIndeterminateVisibility(true); //显示不带进度的进度条
                setProgressBarVisibility(true); //显示带进度的进度条
                setProgress(4500);
            }
        });
        bn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setProgressBarIndeterminateVisibility(false); //显示不带进度的进度条
                setProgressBarVisibility(false); //显示带进度的进度条
            }
        });

    }
}</span>

  2.7 SeekBar拖动条

SeekBar允许用户改变拖动条的滑块外观,改变滑块外观通过android:thumb属性来指定:
  • android:thumb:指定一个Drawable对象,该对象将作为自定义滑块;

【实例】该程序的界面布局中需要两个组件:一个ImageView用于显示图片,一个SeekBar用于动态改变图片的透明度,界面布局如下:

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="songsong.com.imageviewtext.SeekBarTest">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:scaleType="fitCenter"
        android:src="@drawable/img1" />

    <SeekBar
        android:id="@+id/sbk1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="255"
        android:progress="255"
        android:thumb="@drawable/black" />
</LinearLayout>
程序为拖动条绑定一个监听器,当滑块位置发生改变时动态改变ImageView的透明度。

public class SeekBarTest extends Activity {
    ImageView imageView;
    SeekBar seekBar;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_seek_bar);
        seekBar = (SeekBar) findViewById(R.id.sbk1);
        imageView = (ImageView) findViewById(R.id.imageView1);
        //当拖动条的滑块位置发生变化的时候触发该方法
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                imageView.setImageAlpha(progress);//动态改变透明度
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });
    }
}
效果:

技术分享


  2.8 AlertDialog对话框

【实例】创建简单对话框,界面只有一个按钮,在代码中为此按钮绑定监听器:

<span style="font-size:12px;">public class AlertDialogText extends Activity {
    protected void onCreate(Bundle savedInstanceState) {
      ...
          //为按钮绑定单击事件
         public void onClick(View v) {

                AlertDialog.Builder builder = new AlertDialog.Builder(AlertDialogText.this);
                builder.setTitle("简单的标题");   //设置对话框标题
                builder.setMessage("对话框的内容\n,这是测试");    //设置对话框内容
                builder.setIcon(R.drawable.black);     //设置对话框图标
                builder.setCancelable(false);          //可否取消

                builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {     //为builder添加确定按钮
                 @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {  //为builder添加取消按钮
                    @Override
                    public void onClick(DialogInterface dialog, int which) {

                    }
                });
                builder.show();
            }
        });
    }
}</span> 

效果:技术分享

上面这种样式是最简单的,AlertDialog还提供了如下6中方法来指定对话框的内容:

  • setMessage():设置对话框内容为简单文本;
  • setltems():设置对话框内容为简单列表项;
  • setSingleChoiceltems():设置对话框内容为单选列表项;
  • setMultiChoiceltems():设置对话框内容为多选列表项;
  • setAdapter():设置对话框内容为自定义列表项;
  • setView():设置对话框内容为自定义View;

【实例】用setView来设置登录界面:

1、定义界面布局login.xml

<span style="font-size:12px;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/lg"
    android:padding="30dp">
    <EditText
        android:id="@+id/et1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入账号" />
    <EditText
        android:id="@+id/et2"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入密码" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <EditText
            android:id="@+id/et3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
        <Button
            android:id="@+id/bt2"
            android:layout_width="220dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_weight="1"
            android:text="短信验证" />
    </LinearLayout>
</LinearLayout></span>
2、在MainActivity代码中写:

<span style="font-size:12px;">public class ViewAlertDialogText extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_alert_dialog_text);

        findViewById(R.id.bt1).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LinearLayout lg = (LinearLayout) getLayoutInflater().inflate(R.layout.login, null);
                new AlertDialog.Builder(ViewAlertDialogText.this)
                        .setTitle("登录界面")
                        .setIcon(R.drawable.black)
                        .setView(lg)
                        .setCancelable(false)
                        .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                            }
                        })
                        .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                            }
                        })
                        .show();
            }
        });
    }
}</span>
在主布局文件中仅有一个按钮,代码就不贴出来了。以下是效果图:
技术分享

  2.9 ProgressDialog进度对话框

ProgressDialog和AlertDialog有点类似,但ProgressDialog一般用来表示当前操作比较耗时,让用户耐心等待。创建ProgressDialog进度对话框有如下两种方式:

  1. 如果只是创建简单的进度对话框,那么调用ProgressDialog提供的静态show()方法显示对话框即可。
  2. 创建ProgressDialog,然后调用方法对对话框里的进度条进行设置,设置完成后将对话框显示即可。

为了对进度对话框的进度条进行设置,ProgressDialog包含了如下常用的方法:

  • setIndeterminate(boolean indeterminate):设置对话框里的进度条不显示进度值;
  • setMax(int):设置对话框里进度条的最大值;
  • setMessage(CharSequece):设置对话框里的消息;
  • setProgress(int value):设置对话框里进度条的进度值;
  • setProgressStyle (int style):设置对话框里进度条的风格;

【实例】

  2.10 Menu菜单







  2.7 ToggleButton状态开关与Switch开关
  2.7  时钟AnalogClock与TextClock
  2.7 Chronometer计时器








  今天学习Android应用的界面编程,


学习内容:

  • 掌握View和ViewGroup类
  • 学习各个常用控件的使用方法
  • 了解View的本质
  • 熟练掌握自定义AndroidUI组件
  • 熟练掌握Canvas和Drawable画自定义组件以及事件
  • 熟练NinePatch图像的使用(9图):保存局部不变,其余拉伸
  • 日记工具Log


  • ListView的使用
  • 了解Android界面事件机制

考察问题:

  • View是所有控件的基类,能否说一下他与Activity的关系。
  • View的核心是什么,能否说一下里面的onDraw函数。
  • 自定义组件如何实现自定义事件。
  • NinePatch是干什么的
  • 简单描述下Android界面事件机制

Android基础知识(1)——UI编程

标签:

原文地址:http://blog.csdn.net/qq_26849491/article/details/51638757

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!