android UI

一、文本视图TextView

xml布局android:text ------代码setText ，设置文本内容

xml布局android:textColor ------代码setTextColor，设置文本颜色

xml布局android:textSize ------代码setTextSize，设置文本大小

xml布局android:textApppearance------代码setTextApppearance，设置文本风格，风格定义在res/style.xml中

xml布局android:gravity------代码setGravity，设置文本的对齐方式

例子：跑马灯效果

xml代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:gravity="center"android:text="跑马灯效果，点击暂停，再点击恢复" /><TextViewandroid:id="@+id/tv_marquee"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:singleLine="true"android:ellipsize="marquee"android:focusable="true"android:focusableInTouchMode="true"android:textColor="#000000"android:textSize="17sp"android:text="快讯：红色预警，超强台风“莫兰蒂”即将登陆，请居民关紧门窗、备足粮草，做好防汛救灾准备！" /></LinearLayout>

activity.java代码

package com.example.junior;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.TextView;/** * Created by ouyangshen on 2016/9/14. */public class MarqueeActivity extends AppCompatActivity implements View.OnClickListener {    private TextView tv_marquee;    private boolean bPause = false;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_marquee);        tv_marquee = (TextView) findViewById(R.id.tv_marquee);        tv_marquee.setOnClickListener(this);    }    @Override    public void onClick(View v) {        if (v.getId() == R.id.tv_marquee) {            bPause = !bPause;            if (bPause) {                tv_marquee.setFocusable(false);                tv_marquee.setFocusableInTouchMode(false);            } else {                tv_marquee.setFocusable(true);                tv_marquee.setFocusableInTouchMode(true);            }        }    }}

上述例子的一些属性：

xml布局android:singleLine ------代码setSingleLine，设置文本是否单行显示

xml布局android:ellipsize ------代码setEllipsize，设置文本超出范围后的省略方式，省略方式取值（start-省略号在开头，middle-省略号在中间，end-省略号在末尾，marquee-跑马灯显示）

xml布局android:focusable ------代码setFocusable，指定是否获得焦点，跑马灯效果要求设置为true

xml布局android:focusableInTouchMode ------代码setFocusableInTouchMode，指定触摸时是否获得焦点，跑马灯效果要求设置为true

例2：聊天室或者文字直播间的滚动效果

activity_bbs.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:id="@+id/tv_control"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="20dp"android:gravity="center"android:text="聊天室效果，点击添加聊天记录，长按删除聊天记录" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:orientation="vertical"><TextViewandroid:id="@+id/tv_bbs"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="20dp"android:scrollbars="vertical"android:textColor="#000000"android:textSize="17sp" /></LinearLayout></LinearLayout>

BbsActivity.java

package com.example.junior;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.text.method.ScrollingMovementMethod;import android.util.Log;import android.view.Gravity;import android.view.View;import android.widget.TextView;import com.example.junior.util.DateUtil;/** * Created by ouyangshen on 2016/9/14. */public class BbsActivity extends AppCompatActivity implements View.OnClickListener, View.OnLongClickListener {private TextView tv_bbs;private TextView tv_control;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_bbs);tv_control = (TextView) findViewById(R.id.tv_control);tv_control.setOnClickListener(this);tv_control.setOnLongClickListener(this);tv_bbs = (TextView) findViewById(R.id.tv_bbs);tv_bbs.setOnClickListener(this);tv_bbs.setOnLongClickListener(this);tv_bbs.setGravity(Gravity.LEFT|Gravity.BOTTOM);tv_bbs.setLines(8);tv_bbs.setMaxLines(8);tv_bbs.setMovementMethod(new ScrollingMovementMethod());}private String[] mChatStr = { "你吃饭了吗？", "今天天气真好呀。","我中奖啦！", "我们去看电影吧", "晚上干什么好呢？", };@Overridepublic void onClick(View v) {if (v.getId() == R.id.tv_control || v.getId() == R.id.tv_bbs) {int random = (int)(Math.random()*10) % 5;String newStr = String.format("%s\n%s %s",tv_bbs.getText().toString(), DateUtil.getNowTime(), mChatStr[random]);tv_bbs.setText(newStr);}}@Overridepublic boolean onLongClick(View v) {if (v.getId() == R.id.tv_control || v.getId() == R.id.tv_bbs) {tv_bbs.setText("");}return true;}}

上例用到的属性

xml布局android:gravity ------代码setGravity，设置文本的对齐方式

xml布局android:lines ------代码setLines，指定文本的行数

xml布局android:maxLines ------代码setMaxLines，指定文本最大行数

xml布局android:scorllbars ------代码无，指定滚动条的方向，取值vertical，如果不指定将不显示滚动条

无----------代码setMovementMethod，指定文本的移动方式，可设置ScrollingMovementMethod，如果不设置将无法拉动文本。

二、按钮Button

Button派生自TextView，它默认有一个按钮的外观，如果设置background为@null，button看起来就会和TextView差不多。

例：为Button对象注册点击监听器和长按监听器

ClickActivity.java

package com.example.junior;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;import android.widget.TextView;import android.widget.Toast;/** * Created by ouyangshen on 2016/9/14. */public class ClickActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_click);Button btn_click = (Button) findViewById(R.id.btn_click);btn_click.setOnClickListener(new MyOnClickListener());btn_click.setOnLongClickListener(new MyOnLongClickListener());}class MyOnClickListener implements View.OnClickListener {@Overridepublic void onClick(View v) {if (v.getId() == R.id.btn_click) {Toast.makeText(ClickActivity.this, "您点击了控件：" + ((TextView) v).getText(), Toast.LENGTH_SHORT).show();}}}class MyOnLongClickListener implements View.OnLongClickListener {@Overridepublic boolean onLongClick(View v) {if (v.getId() == R.id.btn_click) {Toast.makeText(ClickActivity.this, "您长按了控件：" + ((TextView) v).getText(), Toast.LENGTH_SHORT).show();}return true;}}}

activity_click.xml

<?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">    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="20dp"        android:gravity="center"        android:text="下面按钮支持点击和长按事件" />    <Button        android:id="@+id/btn_click"scaleType拉伸类型取值说明                                android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="20dp"        android:gravity="center"        android:textColor="#000000"        android:textSize="17sp"        android:text="点我，长按亦可" /></LinearLayout>

三、图像视图ImageView

ImageView是图像显示空间，与图形显示有关的属性有：

scaleType：指定图像的拉伸类型，默认是fitCenter

拉伸类型的取值说明XML中的拉伸类型ScaleType类中的拉伸类型说明fitXYFIT_XY拉伸图片使其正好填满视图（图片可能被拉伸变形）fitStartFIT_START拉伸图片使其位于视图上部fitCenterFTI_CENTER拉伸图片使其位于视图中间fitEndFIT_END拉伸图片使其位于视图下部centerCENTER保持图片原尺寸，并使其位于视图中间centerCropCENTER_CROP拉伸图片使其充满视图，并位于视图中间centerInsideCENTER_INSIDE使图片位于视图中间（只压不拉）。当图片尺寸大于视图时，centerInside等同于fitCenter;当图片尺寸小于视图时，centerInside等同于center.
src：指定图像来源，src图形按照scaleType拉伸。而背景图不用scaleType指定的方式拉伸，背景默认以fitXY方式拉伸。

ImageView在代码中调用的方法说明如下：

setScaleType：设置图片的拉伸类型

setImageDrawable：设置图形的Drawable对象

setImageResource：设置图形的资源ID

setImageBitmap：设置图形的位图对象

例：ScaleType不同拉伸的效果

ScaleType.java

package com.example.junior;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;import android.widget.ImageView;/** * Created by ouyangshen on 2016/9/15. */public class ScaleActivity extends AppCompatActivity implements View.OnClickListener {private ImageView iv_scale;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_scale);iv_scale = (ImageView) findViewById(R.id.iv_scale);findViewById(R.id.btn_center).setOnClickListener(this);findViewById(R.id.btn_fitCenter).setOnClickListener(this);findViewById(R.id.btn_centerCrop).setOnClickListener(this);findViewById(R.id.btn_centerInside).setOnClickListener(this);findViewById(R.id.btn_fitXY).setOnClickListener(this);findViewById(R.id.btn_fitStart).setOnClickListener(this);findViewById(R.id.btn_fitEnd).setOnClickListener(this);}@Overridepublic void onClick(View v) {if (v.getId() == R.id.btn_center) {iv_scale.setScaleType(ImageView.ScaleType.CENTER);} else if (v.getId() == R.id.btn_fitCenter) {iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);} else if (v.getId() == R.id.btn_centerCrop) {iv_scale.setScaleType(ImageView.ScaleType.CENTER_CROP);} else if (v.getId() == R.id.btn_centerInside) {iv_scale.setScaleType(ImageView.ScaleType.CENTER_INSIDE);} else if (v.getId() == R.id.btn_fitXY) {iv_scale.setScaleType(ImageView.ScaleType.FIT_XY);} else if (v.getId() == R.id.btn_fitStart) {iv_scale.setScaleType(ImageView.ScaleType.FIT_START);} else if (v.getId() == R.id.btn_fitEnd) {iv_scale.setScaleType(ImageView.ScaleType.FIT_END);}}}

activity_scale.xml

<?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">    <ImageView        android:id="@+id/iv_scale"        android:layout_width="match_parent"        android:layout_height="300dp"        android:layout_marginTop="10dp"        android:background="@color/colorAccent"        android:src="@drawable/scalew" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:orientation="horizontal">        <Button            android:id="@+id/btn_fitCenter"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="fitCenter"            android:textColor="#000000"            android:textSize="11sp" />        <Button            android:id="@+id/btn_centerCrop"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="centerCrop"            android:textColor="#000000"            android:textSize="11sp" />        <Button            android:id="@+id/btn_centerInside"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="centerInside"            android:textColor="#000000"            android:textSize="11sp" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:orientation="horizontal">        <Button            android:id="@+id/btn_center"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="center"            android:textColor="#000000"            android:textSize="11sp" />        <Button            android:id="@+id/btn_fitXY"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="fitXY"            android:textColor="#000000"            android:textSize="11sp" />        <Button            android:id="@+id/btn_fitStart"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="fitStart"            android:textColor="#000000"            android:textSize="11sp" />        <Button            android:id="@+id/btn_fitEnd"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="fitEnd"            android:textColor="#000000"            android:textSize="11sp" />    </LinearLayout></LinearLayout>

效果图：

   

  

例：截图应用

CaptureActivity.java

package com.example.junior;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Handler;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;import android.widget.ImageView;import android.widget.TextView;import com.example.junior.util.DateUtil;/** * Created by ouyangshen on 2016/9/15. */public class CaptureActivity extends AppCompatActivity implements View.OnClickListener, View.OnLongClickListener {private TextView tv_capture;private ImageView iv_capture;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_capture);tv_capture = (TextView) findViewById(R.id.tv_capture);iv_capture = (ImageView) findViewById(R.id.iv_capture);tv_capture.setDrawingCacheEnabled(true);//设置绘图缓存为可用状态Button btn_chat = (Button) findViewById(R.id.btn_chat);Button btn_capture = (Button) findViewById(R.id.btn_capture);btn_chat.setOnClickListener(this);btn_chat.setOnLongClickListener(this);btn_capture.setOnClickListener(this);}private String[] mChatStr = { "你吃饭了吗？", "今天天气真好呀。","我中奖啦！", "我们去看电影吧。", "晚上干什么好呢？" };@Overridepublic boolean onLongClick(View v) {if (v.getId() == R.id.btn_chat) {tv_capture.setText("");}return true;}@Overridepublic void onClick(View v) {if (v.getId() == R.id.btn_chat) {int random = (int)(Math.random()*10) % 5;String newStr = String.format("%s\n%s %s",tv_capture.getText().toString(), DateUtil.getNowTime(), mChatStr[random]);tv_capture.setText(newStr);} else if (v.getId() == R.id.btn_capture) {Bitmap bitmap = tv_capture.getDrawingCache();//获取缓存中的图像数据iv_capture.setImageBitmap(bitmap);// 注意这里在截图完毕后不能马上关闭绘图缓存，因为画面渲染需要时间，// 如果立即关闭缓存，渲染画面就会找不到位图对象，会报错// “java.lang.IllegalArgumentException: Cannot draw recycled bitmaps”。mHandler.postDelayed(mResetCache, 200);//延迟200ms后调用}}private Handler mHandler = new Handler();private Runnable mResetCache = new Runnable() {@Overridepublic void run() {tv_capture.setDrawingCacheEnabled(false);//setDrawingCacheEnabled关闭绘图缓存tv_capture.setDrawingCacheEnabled(true);//还需要截图，重新开启}};}

activity_capture.xml

<?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">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="200dp"        android:layout_marginTop="10dp"        android:orientation="horizontal">        <TextView            android:id="@+id/tv_capture"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:background="#ffffff"            android:textColor="#000000"            android:textSize="17sp" />        <ImageView            android:id="@+id/iv_capture"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:orientation="horizontal">        <Button            android:id="@+id/btn_chat"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="聊天"            android:textColor="#000000"            android:textSize="17sp" />        <Button            android:id="@+id/btn_capture"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="截图"            android:textColor="#000000"            android:textSize="17sp" />    </LinearLayout></LinearLayout>

效果图：

 

四、图像按钮ImageButton

ImageButton派生自ImageView。

（1）ImageButton只能显示图形不能显示文本。Button可显示文本和图形（通过设置背景图）

（2）ImageButton上的图像可以按比例拉伸。Button上的大图会拉伸变形（因为背景图无法按比例拉伸）

（3）ImageButton可分别在前景和背景显示两张图形，实现图片叠加的效果，Button只能在背景显示一张图形。

例：变换图标的位置

   

activity_icon.xml

<?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">    <Button        android:id="@+id/btn_icon"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:layout_gravity="center"        android:drawableLeft="@mipmap/ic_launcher"        android:drawablePadding="5dp"        android:text="热烈欢迎"        android:textColor="#000000"        android:textSize="17sp" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:orientation="horizontal">        <Button            android:id="@+id/btn_left"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="图标在左"            android:textColor="#000000"            android:textSize="15sp" />        <Button            android:id="@+id/btn_top"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="图标在上"            android:textColor="#000000"            android:textSize="15sp" />        <Button            android:id="@+id/btn_right"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="图标在右"            android:textColor="#000000"            android:textSize="15sp" />        <Button            android:id="@+id/btn_bottom"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="图标在下"            android:textColor="#000000"            android:textSize="15sp" />    </LinearLayout></LinearLayout>

IconActivity.java

package com.example.junior;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.Button;/** * Created by ouyangshen on 2016/9/15. */public class IconActivity extends AppCompatActivity implements View.OnClickListener {private Button btn_icon;private Drawable drawable;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_icon);btn_icon = (Button) findViewById(R.id.btn_icon);drawable = getResources().getDrawable(R.mipmap.ic_launcher);// 必须设置图片大小，否则不显示图片drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());Button btn_left = (Button) findViewById(R.id.btn_left);Button btn_top = (Button) findViewById(R.id.btn_top);Button btn_right = (Button) findViewById(R.id.btn_right);Button btn_bottom = (Button) findViewById(R.id.btn_bottom);btn_left.setOnClickListener(this);btn_top.setOnClickListener(this);btn_right.setOnClickListener(this);btn_bottom.setOnClickListener(this);}@Overridepublic void onClick(View v) {if (v.getId() == R.id.btn_left) {btn_icon.setCompoundDrawables(drawable, null, null, null);} else if (v.getId() == R.id.btn_top) {btn_icon.setCompoundDrawables(null, drawable, null, null);} else if (v.getId() == R.id.btn_right) {btn_icon.setCompoundDrawables(null, null, drawable, null);} else if (v.getId() == R.id.btn_bottom) {btn_icon.setCompoundDrawables(null, null, null, drawable);}}}

在xml中，属性

drawableTop：指定文本上方的图形

drawableBotton：指定文本下方的图形

drawableLeft：指定文本左边的图形

drawableRight：指定文本右边的图形

drawablePadding：指定文本与图形的距离

在代码中实现上面的属性：

setCompoundDrawables：设置文本周围的图形，可分别设置左边、右边、上边、下边的图形

setCompoundDrawablePadding：设置图形与文本的间距。