Android編程實(shí)現(xiàn)可滑動(dòng)的開(kāi)關(guān)效果(附demo源碼下載)
本文實(shí)例講述了Android編程實(shí)現(xiàn)可滑動(dòng)的開(kāi)關(guān)效果。分享給大家供大家參考,具體如下:
閑著沒(méi)事,把之前寫(xiě)的一個(gè)Demo放上來(lái)分享下。就是一個(gè)開(kāi)關(guān),實(shí)現(xiàn)可滑動(dòng)和動(dòng)畫(huà)效果。不是圖片切換。
好了,先上圖:
完整實(shí)例代碼點(diǎn)擊此處本站下載。
直接把自定義的這個(gè)View代碼放上來(lái),有注釋?xiě)?yīng)該很好理解:
首先是布局:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/sv_container" android:layout_width="230dip" android:layout_height="38dip" android:background="@drawable/usage_list_dark" > <ImageView android:id="@+id/iv_switch_cursor" android:layout_width="120dip" android:layout_height="36dip" android:layout_centerVertical="true" android:layout_marginLeft="0.5dip" android:layout_marginRight="0.5dip" android:background="@drawable/usage_list_green" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" > <TextView android:id="@+id/switch_text_true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="開(kāi)" /> <TextView android:id="@+id/switch_text_false" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="關(guān)" /> </LinearLayout> </RelativeLayout>
接著是這個(gè)View的代碼,繼承自LinearLayout :
package com.lxb.switchdemo; import android.content.Context; import android.graphics.Color; import android.os.Handler; import android.os.Message; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.LinearInterpolator; import android.view.animation.TranslateAnimation; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; public class SwitchView extends LinearLayout implements OnClickListener { private static final int FLAG_MOVE_TRUE = 1; // 向左滑動(dòng)標(biāo)識(shí) private static final int FLAG_MOVE_FALSE = 2; // 向右滑動(dòng)標(biāo)識(shí) private static final int HANDLE_LAYOUT_CURSOR = 100; // 處理調(diào)用開(kāi)關(guān)的layout方法 private Context context; // 上下文對(duì)象 private RelativeLayout sv_container; // SwitchView的外層Layout private ImageView iv_switch_cursor; // 開(kāi)關(guān)郵標(biāo)的ImageView private TextView switch_text_true; // true的文字信息控件 private TextView switch_text_false; // false的文字信息控件 private boolean isChecked = true; // 是否已開(kāi) private boolean checkedChange = false; // isChecked是否有改變 private OnCheckedChangeListener onCheckedChangeListener; // 用于監(jiān)聽(tīng)isChecked是否有改變 private int margin = 1; // 游標(biāo)離邊緣位置(這個(gè)值視圖片而定, 主要是為了圖片能顯示正確) private int bg_left; // 背景左 private int bg_right; // 背景右 private int cursor_left; // 游標(biāo)左部 private int cursor_top; // 游標(biāo)頂部 private int cursor_right; // 游標(biāo)右部 private int cursor_bottom; // 游標(biāo)底部 private Animation animation; // 移動(dòng)動(dòng)畫(huà) private int currentFlag = FLAG_MOVE_TRUE; // 當(dāng)前移動(dòng)方向flag public SwitchView(Context context) { super(context); this.context = context; initView(); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); // 獲取所需要的值 bg_left = sv_container.getLeft(); bg_right = sv_container.getRight(); cursor_left = iv_switch_cursor.getLeft(); cursor_top = iv_switch_cursor.getTop(); cursor_right = iv_switch_cursor.getRight(); cursor_bottom = iv_switch_cursor.getBottom(); } private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { switch(msg.what) { case HANDLE_LAYOUT_CURSOR: iv_switch_cursor.layout(cursor_left, cursor_top, cursor_right, cursor_bottom); break; } } }; public void onClick(View v) { // 控件點(diǎn)擊時(shí)觸發(fā)改變checked值 if(v == this) { changeChecked(!isChecked); } } /** * 初始化控件 */ private void initView() { LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = inflater.inflate(R.layout.switch_view, this); view.setOnClickListener(this); sv_container = (RelativeLayout) view.findViewById(R.id.sv_container); switch_text_true = (TextView) view.findViewById(R.id.switch_text_true); switch_text_false = (TextView) view.findViewById(R.id.switch_text_false); changeTextColor(); iv_switch_cursor = (ImageView) view.findViewById(R.id.iv_switch_cursor); iv_switch_cursor.setClickable(false); iv_switch_cursor.setOnTouchListener(new OnTouchListener() { int lastX; // 最后的X坐標(biāo) public boolean onTouch(View v, MotionEvent event) { switch(event.getAction()) { case MotionEvent.ACTION_DOWN: lastX = (int) event.getRawX(); cursor_left = v.getLeft(); cursor_top = v.getTop(); cursor_right = v.getRight(); cursor_bottom = v.getBottom(); break; case MotionEvent.ACTION_MOVE: int dx = (int) event.getRawX() - lastX; cursor_left = v.getLeft() + dx; cursor_right = v.getRight() + dx; // 超出邊界處理 if(cursor_left <= bg_left + margin) { cursor_left = bg_left + margin; cursor_right = cursor_left + v.getWidth(); } if(cursor_right >= bg_right - margin) { cursor_right = bg_right - margin; cursor_left = cursor_right - v.getWidth(); } v.layout(cursor_left, cursor_top, cursor_right, cursor_bottom); lastX = (int) event.getRawX(); break; case MotionEvent.ACTION_UP: calculateIscheck(); break; } return true; } }); } /** * 計(jì)算處于true或是false區(qū)域, 并做改變處理 */ private void calculateIscheck() { float center = (float) ((bg_right - bg_left) / 2.0); float cursor_center = (float) ((cursor_right - cursor_left) / 2.0); if(cursor_left + cursor_center <= center) { changeChecked(true); } else { changeChecked(false); } } /** * 改變checked, 根據(jù)checked移動(dòng)游標(biāo) * @param isChecked */ private void changeChecked(boolean isChecked) { if(this.isChecked != isChecked) { checkedChange = true; } else { checkedChange = false; } if(isChecked) { currentFlag = FLAG_MOVE_TRUE; } else { currentFlag = FLAG_MOVE_FALSE; } cursorMove(); } /** * 游標(biāo)移動(dòng) */ private void cursorMove() { // 這里說(shuō)明一點(diǎn), 動(dòng)畫(huà)本可設(shè)置animation.setFillAfter(true) // 令動(dòng)畫(huà)進(jìn)行完后停在最后位置. 但這里使用這樣方式的話. // 再次拖動(dòng)圖片會(huì)出現(xiàn)異常(具體原因我沒(méi)找到) // 所以最后只能使用onAnimationEnd回調(diào)方式再layout游標(biāo) animation = null; final int toX; if(currentFlag == FLAG_MOVE_TRUE) { toX = cursor_left - bg_left - margin; animation = new TranslateAnimation(0, -toX, 0, 0); } else { toX = bg_right - margin - cursor_right; animation = new TranslateAnimation(0, toX, 0, 0); } animation.setDuration(100); animation.setInterpolator(new LinearInterpolator()); animation.setAnimationListener(new AnimationListener() { public void onAnimationStart(Animation animation) { } public void onAnimationRepeat(Animation animation) { } public void onAnimationEnd(Animation animation) { // 計(jì)算動(dòng)畫(huà)完成后游標(biāo)應(yīng)在的位置 if(currentFlag == FLAG_MOVE_TRUE) { cursor_left -= toX; cursor_right = cursor_left + iv_switch_cursor.getWidth(); } else { cursor_right = bg_right - margin; cursor_left = cursor_right - iv_switch_cursor.getWidth(); } // 這里不能馬上layout游標(biāo)正確位置, 否則會(huì)有一點(diǎn)點(diǎn)閃屏 // 為了美觀, 這里遲了一點(diǎn)點(diǎn)調(diào)用layout方法, 便不會(huì)閃屏 mHandler.sendEmptyMessageDelayed(HANDLE_LAYOUT_CURSOR, 5); // 這里是根據(jù)是不是改變了isChecked值進(jìn)行一些操作 if(checkedChange) { isChecked = !isChecked; if(onCheckedChangeListener != null) { onCheckedChangeListener.onCheckedChanged(isChecked); } changeTextColor(); } } }); iv_switch_cursor.startAnimation(animation); } /** * 改變字體顯示顏色 */ private void changeTextColor() { if(isChecked) { switch_text_true.setTextColor(Color.WHITE); switch_text_false.setTextColor(Color.GRAY); } else { switch_text_true.setTextColor(Color.GRAY); switch_text_false.setTextColor(Color.WHITE); } } /** * layout游標(biāo) */ private void layoutCursor() { if(isChecked) { cursor_left = bg_left + margin; cursor_right = bg_left + margin + iv_switch_cursor.getWidth(); } else { cursor_left = bg_right - margin - iv_switch_cursor.getWidth(); cursor_right = bg_right - margin; } iv_switch_cursor.layout(cursor_left, cursor_top, cursor_right, cursor_bottom); } /** * isChecked值改變監(jiān)聽(tīng)器 */ public interface OnCheckedChangeListener { void onCheckedChanged(boolean isChecked); } public boolean isChecked() { return isChecked; } public void setChecked(boolean isChecked) { if(this.isChecked != isChecked) { this.isChecked = isChecked; if(onCheckedChangeListener != null) { onCheckedChangeListener.onCheckedChanged(isChecked); } layoutCursor(); } } public void setOnCheckedChangeListener( OnCheckedChangeListener onCheckedChangeListener) { this.onCheckedChangeListener = onCheckedChangeListener; } }
最后是Activity使用這個(gè)View:
package com.lxb.switchdemo; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import com.lxb.switchdemo.SwitchView.OnCheckedChangeListener; public class Switch_demoActivity extends Activity implements OnClickListener { private LinearLayout layout; private TextView tv_showcheck; private SwitchView sv; private Button btn_set_true; private Button btn_set_false; private Button btn_getstate; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); layout = (LinearLayout) findViewById(R.id.layout); tv_showcheck = (TextView) findViewById(R.id.tv_showcheck); sv = new SwitchView(this); tv_showcheck.setText("當(dāng)前狀態(tài): " + getState(sv.isChecked())); sv.setOnCheckedChangeListener(new OnCheckedChangeListener() { public void onCheckedChanged(boolean isChecked) { tv_showcheck.setText("當(dāng)前狀態(tài): " + getState(isChecked)); } }); layout.addView(sv); btn_set_true = (Button) findViewById(R.id.btn_set_true); btn_set_false = (Button) findViewById(R.id.btn_set_false); btn_getstate = (Button) findViewById(R.id.btn_getstate); btn_set_true.setOnClickListener(this); btn_set_false.setOnClickListener(this); btn_getstate.setOnClickListener(this); } public void onClick(View v) { switch(v.getId()) { case R.id.btn_set_true: sv.setChecked(true); break; case R.id.btn_set_false: sv.setChecked(false); break; case R.id.btn_getstate: Toast.makeText(Switch_demoActivity.this, sv.isChecked() + "", Toast.LENGTH_SHORT).show(); break; } } private String getState(boolean state) { if(state) { return "開(kāi)"; } return "關(guān)"; } }
實(shí)現(xiàn)起來(lái)還是很簡(jiǎn)單的,主要還是坐標(biāo)什么的需要計(jì)算與調(diào)整。
當(dāng)然可能還會(huì)有一些BUG存在,有需要的可以下下來(lái)自行修改,也可以和我討論。
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Android通信方式總結(jié)》、《Android調(diào)試技巧與常見(jiàn)問(wèn)題解決方法匯總》、《Android開(kāi)發(fā)入門(mén)與進(jìn)階教程》、《Android多媒體操作技巧匯總(音頻,視頻,錄音等)》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》
希望本文所述對(duì)大家Android程序設(shè)計(jì)有所幫助。
- Android內(nèi)核源碼 在Ubuntu上下載,編譯,安裝
- Android源碼 在Ubuntu上下載,編譯和安裝
- Android RecyclerView的Item自定義動(dòng)畫(huà)及DefaultItemAnimator源碼分析
- Android實(shí)現(xiàn)軟件列表的點(diǎn)擊啟動(dòng)另外一個(gè)程序功能【附demo源碼下載】
- Android實(shí)現(xiàn)中國(guó)象棋附源碼下載
- Android Volley框架使用源碼分享
- 詳解Android中用于線程處理的AsyncTask類的用法及源碼
- 從源碼分析Android的Glide庫(kù)的圖片加載流程及特點(diǎn)
- Android 日志系統(tǒng)Logger源代碼詳細(xì)介紹
相關(guān)文章
Android OpenGL ES 實(shí)現(xiàn)抖音傳送帶特效(原理解析)
這篇文章主要介紹了Android OpenGL ES 實(shí)現(xiàn)抖音傳送帶特效,抖音傳送帶特效推出已經(jīng)很長(zhǎng)一段時(shí)間了,前面也實(shí)現(xiàn)了下,最近把它整理出來(lái)了,如果你有仔細(xì)觀測(cè)傳送帶特效,就會(huì)發(fā)現(xiàn)它的實(shí)現(xiàn)原理其實(shí)很簡(jiǎn)單,需要的朋友可以參考下2022-07-07Android自定義View實(shí)現(xiàn)進(jìn)度條動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)進(jìn)度條動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12Android中實(shí)現(xiàn)自動(dòng)生成布局View的初始化代碼方法
這篇文章主要介紹了Android中實(shí)現(xiàn)自動(dòng)生成布局View的初始化代碼方法,本文使用解析layout 布局文件的方法實(shí)現(xiàn)需求,需要的朋友可以參考下2014-10-10Android Studio導(dǎo)入Project與Module的方法及實(shí)例
這篇文章主要介紹了Android Studio導(dǎo)入Project與Module的方法及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04Android 源碼淺析RecyclerView ItemAnimator
這篇文章主要為大家介紹了Android 源碼淺析RecyclerView ItemAnimator,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12