基礎UI控件 Cannas Drawable 複雜的TextView

UI的呈現 & UI事件

一、UI就是View

android中，UI就是View，所有界面組件繼承於View類

動態生成界面代碼例子：

package com.example.chenjinhua.graphic;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;

public class CustomViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout linearLayout = new LinearLayout(this);

        //相當於xml裏設置LinearLayout的寬高爲MATCH_PARENT.
        linearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT));

        Button button = new Button(this);
        button.setText("jinhua Button");

        //把Button加進父容器裏.
        linearLayout.addView(button);

        setContentView(linearLayout);
    }
}

運行結果，模擬器顯示爲：

用Hierarchy View查看層級關係：

（1）、除了LinearLayout和Button，其餘都是系統自動生成的；
（2）、FrameLayout以及TextView是Graphic這行.

界面顯示機制：Canvas 和 Drawable

用Canvas畫元素：

CustomView類：

package jinhua.demo.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

//定義一個類繼承View
public class CustomView extends View {

    public CustomView(Context context) {
        super(context);
    }

    //重寫onDraw方法
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        canvas.drawRect(10,10,80,80,paint);

    }
}

CustomViewActivity代碼：

package com.example.chenjinhua.graphic;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import jinhua.demo.view.CustomView;

public class CustomViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(new CustomView(this));
    }
}

用Drawable類來獲取Drawable類型資源：

Drawable的好處：用了一種簡單的方式替代了canvas，且和資源文件關聯起來了。
Drawable必須setBounds()。

DrawableView類：

package com.example.chenjinhua.drawableview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.view.View;

/**
 * Created by chenjinhua on 16/2/15.
 */
public class DrawableView extends View {
    BitmapDrawable bitmapDrawable;


    public DrawableView(Context context) {
        super(context);

        bitmapDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.girl);
        bitmapDrawable.setBounds(10,10,135,150);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        bitmapDrawable.draw(canvas);
    }
}

DrawableViewActivity類：

package com.example.chenjinhua.drawableview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class DrawableViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        DrawableView drawableView = new DrawableView(this);
        setContentView(drawableView);
    }
}

二、TextView
1、View的通用屬性
2、設置autoLink
3、設置圖片
4、HTML
5、更靈活的Span
6、設置跑馬燈
7、事件
8、關於主題

例子 - 設置圖片和設置autoLink

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello jinhua,。電話是：18818209888,郵箱是[email protected],新浪主頁是http://www.baidu.com"
        android:textSize="20sp"
        android:textColor="#ff0000"
        android:hint="no data"
        android:singleLine="false"
        android:drawableLeft="@drawable/girl"
        android:drawablePadding="10dp"
        android:layout_marginLeft="10dp"
        android:autoLink="web"
        android:textColorLink="#0000ff"
        android:background="@drawable/girl"/>

</LinearLayout>

其中 android:drawableLeft=”@drawable/girl”//設置左邊圖片;
android:background=”@drawable/girl” //設置背景圖

android:autoLink="web";//web鏈接可跳轉
android:autoLink="phone"; //phone電話可跳轉
android:autoLink="all"//底層支持的都可以跳轉android:textColorLink="#0000ff" //設置鏈接顏色

所有xml文件裏的屬性設置，也可以用代碼在Activity裏設置，如下用TextView顯示從Html字符串中可顯示的樣式文本（使用Spanned）：

package com.example.chenjinhua.formwidgit;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.Spanned;
import android.widget.TextView;

public class FormWidgitActivity extends AppCompatActivity {

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

    public void showTextView(){
       TextView textView1 = (TextView)findViewById(R.id.textView1);
        String html = "<body>中國你好</body>"
                + "<b>中國你好</b>"
                +"<h1>中國你好</h1>"
                +"<font color='#0000ff'>中國你好</font>"
                + "<img src='Qhttps://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' />";
        Spanned spanned = Html.fromHtml(html);
        textView1.setText(spanned);
    }
}

定義了一個showTextView()方法，該方法覆蓋了xml文件裏定義的TextView的文本內容；
TextView.setText(“String”)方法裏的String是spanned;
從運行結果看出未顯示html裏圖片，要實現圖片的顯示需要使用Html.fromHtml的另外一個重構方法。

運行結果爲：

TextView顯示Html圖片（圖片來源於Drawable資源）：

package com.example.chenjinhua.formwidgit;

import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.Spanned;
import android.widget.TextView;

import static android.text.Html.fromHtml;

public class FormWidgitActivity extends AppCompatActivity {

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

    public void showTextView(){
       TextView textView1 = (TextView)findViewById(R.id.textView1);
        String html = "<body>中國你好</body>"
                + "<b>中國你好</b>"
                +"<h1>中國你好</h1>"
                +"<font color='#0000ff'>中國你好</font>"
                + "<img src='Qhttps://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' />";
        Html.ImageGetter imageGetter = new Html.ImageGetter(){
            @Override
            public Drawable getDrawable(String s) {
                if(s != null){
                    BitmapDrawable bitmapDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.girl);
                    bitmapDrawable.setBounds(0,0,bitmapDrawable.getIntrinsicWidth(),bitmapDrawable.getIntrinsicHeight());
                    return bitmapDrawable;
                }else{
                    return null;
                }

            }
        };

        Spanned spanned = fromHtml(html,imageGetter,null);
        textView1.setText(spanned);
    }
}

運行結果爲：

注意Drawable必須setBounds()。否則默認圖片都不顯示。

更靈活的Span - Android字符串中加圖片或者修改字符串樣式：

SpannableString、SpannableStringBuilder與String的關係：
首先SpannableString、SpannableStringBuilder基本上與String差不多，也是用來存儲字符串，但它們倆的特殊就在於有一個SetSpan（）函數，能給這些存儲的String添加各種格式或者稱樣式（Span），將原來的String以不同的樣式顯示出來，比如在原來String上加下劃線、加背景色、改變字體顏色、用圖片把指定的文字給替換掉，等等。所以，總而言之，SpannableString、SpannableStringBuilder與String一樣， 首先也是傳字符串，但SpannableString、SpannableStringBuilder可以對這些字符串添加額外的樣式信息，但String則不行。

package com.example.chenjinhua.formwidgit;

import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.ImageSpan;
import android.widget.TextView;

public class FormWidgitActivity extends AppCompatActivity {

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

    public void showTextView(){
       TextView textView1 = (TextView)findViewById(R.id.textView1);

        BitmapDrawable bitmapDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.girl);
        bitmapDrawable.setBounds(0,0,bitmapDrawable.getIntrinsicWidth(),bitmapDrawable.getIntrinsicHeight());

        //構造SpannedString
        SpannableString spannableString = new SpannableString("今天天氣真是棒，紅色打電話圖片");
        ImageSpan imageSpan = new ImageSpan(bitmapDrawable,ImageSpan.ALIGN_BASELINE);
        spannableString.setSpan(imageSpan,13,14,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        textView1.setText(spannableString);
    }
}

運行結果爲：

設置跑馬燈：
xml屬性添加設置爲：

        android:singleLine="true"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"