Android編程實(shí)現(xiàn)可滑動的開關(guān)效果(附demo源碼下載)

更新時(shí)間：2016年04月12日 11:13:07 作者：肚皮會唱歌

這篇文章主要介紹了Android編程實(shí)現(xiàn)可滑動的開關(guān)效果,涉及Android的布局與控件設(shè)置技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了Android編程實(shí)現(xiàn)可滑動的開關(guān)效果。分享給大家供大家參考，具體如下：

閑著沒事，把之前寫的一個(gè)Demo放上來分享下。就是一個(gè)開關(guān)，實(shí)現(xiàn)可滑動和動畫效果。不是圖片切換。

好了，先上圖：

完整實(shí)例代碼點(diǎn)擊此處本站下載。

直接把自定義的這個(gè)View代碼放上來，有注釋應(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="開" />
    <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; // 向左滑動標(biāo)識
  private static final int FLAG_MOVE_FALSE = 2; // 向右滑動標(biāo)識
  private static final int HANDLE_LAYOUT_CURSOR = 100; // 處理調(diào)用開關(guān)的layout方法
  private Context context; // 上下文對象
  private RelativeLayout sv_container; // SwitchView的外層Layout
  private ImageView iv_switch_cursor; // 開關(guān)郵標(biāo)的ImageView
  private TextView switch_text_true; // true的文字信息控件
  private TextView switch_text_false; // false的文字信息控件
  private boolean isChecked = true; // 是否已開
  private boolean checkedChange = false; // isChecked是否有改變
  private OnCheckedChangeListener onCheckedChangeListener; // 用于監(jiān)聽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; // 移動動畫
  private int currentFlag = FLAG_MOVE_TRUE; // 當(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移動游標(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)移動
   */
  private void cursorMove() {
    // 這里說明一點(diǎn), 動畫本可設(shè)置animation.setFillAfter(true)
    // 令動畫進(jìn)行完后停在最后位置. 但這里使用這樣方式的話.
    // 再次拖動圖片會出現(xiàn)異常(具體原因我沒找到)
    // 所以最后只能使用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ì)算動畫完成后游標(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)正確位置, 否則會有一點(diǎn)點(diǎn)閃屏
        // 為了美觀, 這里遲了一點(diǎn)點(diǎn)調(diào)用layout方法, 便不會閃屏
        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)聽器
   */
  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 "開";
    }
    return "關(guān)";
  }
}

實(shí)現(xiàn)起來還是很簡單的，主要還是坐標(biāo)什么的需要計(jì)算與調(diào)整。

當(dāng)然可能還會有一些BUG存在，有需要的可以下下來自行修改，也可以和我討論。

更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《Android通信方式總結(jié)》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android開發(fā)入門與進(jìn)階教程》、《Android多媒體操作技巧匯總(音頻,視頻,錄音等)》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》

希望本文所述對大家Android程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: