Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android學習筆記十二之Android基礎UI三

Android學習筆記十二之Android基礎UI三

編輯：關於Android編程

ScrollView滾動視圖

ScrollView是繼承於FrameLayout，也是一個顯示容器，由於手機屏幕是有限的，當需要組件安排多組信息的時候，ScrollView可以安排這些組件，我們浏覽的時候可以進行滑動操作，滾動顯示。但是，需要注意的是，ScrollView只能包含一種組件。

實現代碼：

 @Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_scrollview);
    tv_scrollview_show = (TextView) findViewById(R.id.tv_show);
    btn_to_top = (Button) findViewById(R.id.btn_to_top);
    btn_to_bottom = (Button) findViewById(R.id.btn_to_bottom);
    scrollView = (ScrollView) findViewById(R.id.sc);
    initData();
    btn_to_top.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            scrollView.fullScroll(ScrollView.FOCUS_UP);
        }
    });
    btn_to_bottom.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            scrollView.fullScroll(ScrollView.FOCUS_DOWN);
        }
    });
}

private void initData() {
    StringBuffer buffer = new StringBuffer();
    for (int i = 1; i < 120; i++) {
        buffer.append("這是第" + i + "個條目" + "\n");
    }
    tv_scrollview_show.setText(buffer.toString());
}

效果圖：

\

ScrollView就介紹到這裡，這個不是很常用。

ProgressBar進度條

進度條在很多場景下都需要用到，在進行一些耗時操作，如果不做進度顯示，用戶會以為應用ANR，給用戶造成不好的體驗，所以需要用到進度條。Android系統提供的進度條ProgressBar繼承於View，有如下的屬性：

    android:max：進度條的最大值
    android:progress：進度條已完成進度
    android:progressDrawable：設置軌道對應的Drawable對象
    android:indeterminate：如果設置成true，則進度條不精確顯示進度
    android:indeterminateDrawable：設置不顯示進度的進度條的Drawable對象
    android:indeterminateDuration：設置不精確顯示進度的持續時間
    android:secondaryProgress：二級進度條，類似於視頻播放的一條是當前播放進度，一條是緩沖進度，前者通過progress屬性進行設置！

對應Java方法有：

    getMax()：獲取這個進度條的上限
    getProgress()：獲取到當前進度
    getSecondaryProgress()：獲取次要進度
    incrementProgressBy(int diff)：指定增加的進度
    isIndeterminate()：指示進度條是否處於不確定模式
    setIndeterminate(boolean indeterminate)：設置進度條進入不確定模式

系統提供的進度條在這裡就不多介紹了，比較簡單，下面是自定義進度條的例子：

package com.example.hello_baseui.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;

import com.example.hello_baseui.R;

/**
 * Created by Administrator on 2016/6/29.
 */
public class CircleProgressBar extends View {

/**
 * 畫筆對象的引用
 */
private Paint paint;

/**
 * 圓環的顏色
 */
private int circleColor;

/**
 * 圓環進度的顏色
 */
private int circleProgressColor;

/**
 * 中間進度百分比的字符串的顏色
 */
private int textColor;

/**
 * 中間進度百分比的字符串的字體大小
 */
private float textSize;

/**
 * 圓環的寬度
 */
private float circleWidth;

/**
 * 最大進度
 */
private int max;

/**
 * 當前進度
 */
private int progress;
/**
 * 是否顯示中間的進度
 */
private boolean isShowProgressText;

/**
 * 進度的風格，實心或者空心
 */
private int circleStyle;
private float strokeWidth;
/**
 * 空心
 */
public static final int STROKE = 0;
/**
 * 實心
 */
public static final int FILL = 1;

/**
 * 構造器
 *
 * @param context
 */
public CircleProgressBar(Context context) {
    this(context, null);
}

/**
 * 構造器
 *
 * @param context
 * @param attrs
 */
public CircleProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

/**
 * 構造器
 *
 * @param context
 * @param attrs
 * @param defStyleAttr
 */
public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initView(context, attrs);
}

/**
 * 初始化組件
 *
 * @param context
 * @param attrs
 */
private void initView(Context context, AttributeSet attrs) {
    paint = new Paint();
    TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
    circleColor = mTypedArray.getColor(R.styleable.CircleProgressBar_circleColor, Color.RED);
    circleProgressColor = mTypedArray.getColor(R.styleable.CircleProgressBar_circleProgressColor, Color.BLUE);
    textColor = mTypedArray.getColor(R.styleable.CircleProgressBar_textColor, Color.BLUE);
    textSize = mTypedArray.getDimension(R.styleable.CircleProgressBar_textSize, 14);
    circleWidth = mTypedArray.getDimension(R.styleable.CircleProgressBar_circleWidth, 10);
    isShowProgressText = mTypedArray.getBoolean(R.styleable.CircleProgressBar_isShowProgressText, true);
    circleStyle = mTypedArray.getInt(R.styleable.CircleProgressBar_circleStyle, 0);
    mTypedArray.recycle();
}

/**
 * 繪制
 *
 * @param canvas
 */
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //繪制最外層的大圓
    int centre = getWidth() / 2; //獲取圓心的x坐標
    int radius = (int) (centre - circleWidth / 2) - 2; //圓環的半徑
    paint.setColor(circleColor);
    paint.setStyle(Paint.Style.STROKE);//設置為空心
    paint.setStrokeWidth(strokeWidth); //設置圓環的寬度
    paint.setAntiAlias(true);//消除鋸齒
    canvas.drawCircle(centre, centre, radius, paint); //畫出圓環
    //===========================================================
    //繪制進度的百分比
    paint.setStrokeWidth(0);
    paint.setColor(textColor);
    paint.setTextSize(textSize);
    paint.setTypeface(Typeface.DEFAULT_BOLD); //設置字體
    int percent = (int) (((float) progress / (float) max) * 100);  //中間的進度百分比，先轉換成float在進行除法運算，不然都為0
    float textWidth = paint.measureText(percent + "%");   //測量字體寬度，我們需要根據字體的寬度設置在圓環中間

    if (isShowProgressText && circleStyle == STROKE) {
        canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize / 2, paint); //畫出進度百分比
    }
    //============================================================================
    //繪制圓弧和進度
    paint.setStrokeWidth(strokeWidth); //設置圓環的寬度
    paint.setColor(circleProgressColor);  //設置進度的顏色
    RectF oval = new RectF(centre - radius - 1, centre - radius - 1, centre + radius + 1, centre + radius + 1);  //用於定義的圓弧的形狀和大小的界限
    switch (circleStyle) {
        case STROKE: {
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(oval, 90, 360 * progress / max, false, paint);  //根據進度畫圓弧
            break;
        }
        case FILL: {
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            if (progress != 0)
                canvas.drawArc(oval, 90, 360 * progress / max, true, paint);  //根據進度畫圓弧
            break;
        }
    }

}
//==============================get and set========================

/**
 * 設置進度的最大值
 *
 * @param max
 */
public synchronized void setMax(int max) {
    if (max < 0) {
        throw new IllegalArgumentException("The max cannot less than  0");
    }
    this.max = max;
}

public synchronized int getMax() {
    return max;
}

/**
 * 獲取進度.需要同步
 *
 * @return
 */
public synchronized int getProgress() {
    return progress;
}

/**
 * 設置進度，此為線程安全控件，由於考慮多線的問題，需要同步
 * 刷新界面調用postInvalidate()能在非UI線程刷新
 *
 * @param progress
 */
public synchronized void setProgress(int progress) {
    if (progress < 0) {
        throw new IllegalArgumentException("The progress cannot less then 0");
    }
    if (progress > max) {
        progress = max;
    }
    if (progress <= max) {
        this.progress = progress;
        postInvalidate();
    }

}

public int getCircleColor() {
    return circleColor;
}

/**
 * 設置圓環的顏色
 *
 * @param circleColor
 */
public void setCircleColor(int circleColor) {
    this.circleColor = circleColor;
}

public int getTextColor() {
    return textColor;
}

/**
 * 設置圓環字體的顏色
 *
 * @param textColor
 */
public void setTextColor(int textColor) {
    this.textColor = textColor;
}

public float getTextSize() {
    return textSize;
}

/**
 * 設置圓環字體的大小
 *
 * @param textSize
 */
public void setTextSize(float textSize) {
    this.textSize = textSize;
}

public float getCircleWidth() {
    return circleWidth;
}

/**
 * 設置圓的寬度
 *
 * @param circleWidth
 */
public void setCircleWidth(float circleWidth) {
    this.circleWidth = circleWidth;
}

public boolean isShowProgressText() {
    return isShowProgressText;
}

/**
 * 設置是否顯示進度百分比
 *
 * @param showProgressText
 */
public void setShowProgressText(boolean showProgressText) {
    isShowProgressText = showProgressText;
}

public int getCircleStyle() {
    return circleStyle;
}

/**
 * 設置圓環的樣式，空心和實心
 *
 * @param circleStyle
 */
public void setCircleStyle(int circleStyle) {
    this.circleStyle = circleStyle;
}

public float getStrokeWidth() {
    return strokeWidth;
}

/**
 * 設置繪制圓環的寬度
 * @param strokeWidth
 */
public void setStrokeWidth(float strokeWidth) {
    this.strokeWidth = strokeWidth;
}

public int getCircleProgressColor() {
    return circleProgressColor;
}

/**
 * 設置繪制圓環進度的顏色
 * @param circleProgressColor
 */
public void setCircleProgressColor(int circleProgressColor) {
    this.circleProgressColor = circleProgressColor;
}
//==============================get and set========================
}

使用例子：

布局文件代碼：

Java代碼：

private CircleProgressBar circleProgressBar;
int progressStatus = 0;


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_progressbar);
    circleProgressBar = (CircleProgressBar) findViewById(R.id.cpb);
    circleProgressBar.setMax(100);
    circleProgressBar.setCircleWidth(30);
    circleProgressBar.setStrokeWidth(10);
    circleProgressBar.setCircleProgressColor(Color.BLUE);
    final Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            if (msg.what == 0) {
                circleProgressBar.setProgress(progressStatus);
            }

        }
    };
    new Thread(new Runnable() {
        @Override
        public void run() {
            while (progressStatus < 100) {
                progressStatus += 3;
                try {
                    Thread.sleep(1000);
                    handler.sendEmptyMessage(0);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

            }
        }
    }).start();

}

實現效果圖：

\

一些長方形的進度條

SeekBar拖動條

SeekBar是ProgressBar的子類，ProgressBar裡面的屬性SeekBar都能用。SeekBar類似於ProgressBar，但是SeekBar可以允許用戶拖動改變進度，我們可以將它用戶多媒體播放，下面介紹一下SeekBar，實現一個簡單的例子：

布局文件代碼：

java代碼：

private SeekBar sb;
private TextView textView;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_seekbar);
    sb = (SeekBar) findViewById(R.id.sb);
    textView = (TextView) findViewById(R.id.tv_seek_bar);
    textView.setMovementMethod(ScrollingMovementMethod.getInstance());//設置文字可以滾動
    //設置SeekBar事件監聽，需要實現三個方法
    sb.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        /**
         * 拖動操作
         * @param seekBar
         * @param i
         * @param b
         */
        @Override
        public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
            textView.setText("正在拖動，拖動了：" + sb.getProgress() + "\n");
        }

        /**
         * 剛開始拖動
         * @param seekBar
         */
        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            textView.setText("開始拖動，拖動了：" + sb.getProgress() + "\n");
        }

        /**
         * 停止拖動
         * @param seekBar
         */
        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            textView.setText("停止拖動了,已經拖動了：" + sb.getProgress() + "\n");
        }
    });
}

實現的效果圖：

\

關於SeekBar就簡單介紹到這裡。Android系統常用的UI就介紹到這裡，下面我們介紹一下Android的五大布局<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPs/Cw+bV4tCpyse5+sTavrXP8bXEQVBJPC9wPg0KPHA+PGEgaHJlZj0="http://android.xsoftlab.net/reference/android/widget/ScrollView.html">ScrollView滾動視圖

SeekBar拖動條

ProgressBar進度條

這是例子源碼

  1. 上一頁:
  2. 下一頁:
關於Android編程
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android的四大組件 Android編程實現讀取本地SD卡圖片的方法 Android基礎之十七使用網絡技術 listview固定頭標 Android開發：利用AlarmManager不間斷向服務器發送請求以及notification通知 Android使用okHttp(get方式)下載圖片
學習Android之SharedPreferences使用

效果圖如下： package com.example.l3_shared
android對app進行代碼混淆

接到一個新的任務，對現有項目進行代碼混淆。之前對混淆有過一些了解，但是不
Android學習筆記之Shared Preference

如果沒有特殊要求，我們可以使用Android提供的框架來創建系統樣式的P
Android的消息處理機制——Looper,Handler和Message淺析

題外話： 說來有些慚愧，對於這三者的初步認識居然是在背面試題的時候。那個
閱讀排行版
Copyright © Android教程網 All Rights Reserved