在开发systemUi过程中,要求像小米的开关排序进行拖拽添加,对控制中心的每个按钮添加更新;经过不停的探索,最终实现出结果;
下面我们来看实现;
我们先看values下的xml的实现:
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="itemColorNormal">#FFFFFF</color>
<color name="itemColorPressed">#F5F5F5</color>
</resources>
strings.xml
<resources>
....
<string name="app_name">MyDragListView</string>
<string name="drag_tag_text">上方%1$d个开关会出现在通知栏中</string>
</resources>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="@android:style/Theme.Holo.Light">
<!-- Customize your theme here. -->
<!--<item name="colorPrimary">@color/colorPrimary</item>-->
<!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>-->
<!--<item name="colorAccent">@color/colorAccent</item>-->
</style>
</resources>
在工程目录下创建一个widget包,创建java文件;
LDragItemClass.java:
package application.com.drag.widget;
public class LDragItemClass {
public String name;
}
LDragListView.java
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ListView;
public class LDragListView extends ListView {
private LDragAdapter adapter;
private boolean isDragStatus;
private View mItemView;
private Bitmap mBitmap = null;
private int mCurrentPosition;
private int mLastPosition;
private int mDragViewOffset=0; // 触摸点在itemView中的高度
private int mLastX=0, mLastY=0;
private int mDownX=0, mDownY=0;
Paint mPaint;
BlurMaskFilter bf;
int radius = 10;
public LDragListView(Context context) {
this(context,null);
}
public LDragListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LDragListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
void init(Context context){
// 实例化画笔
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
mPaint.setColor(Color.DKGRAY);
//outer solid normal 都可以 但是inner不行
bf = new BlurMaskFilter(radius, BlurMaskFilter.Blur.OUTER);
mPaint.setMaskFilter(bf);
mPaint.setAlpha(120);
mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action){
case MotionEvent.ACTION_DOWN:
stopDrag();
mLastX = mDownX = (int) ev.getX();
mLastY = mDownY = (int) ev.getY();
if(startDrag(false, mDownX, mDownY)){
return true;
}
break;
case MotionEvent.ACTION_MOVE:
if(isDragStatus) {
mLastX = (int) ev.getX();
mLastY = (int) ev.getY();
onDrag(mLastY);
invalidate();
return true;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_OUTSIDE:
case MotionEvent.ACTION_CANCEL:
isDragStatus = false;
if (mBitmap != null) {
mLastX = (int) ev.getX();
mLastY = (int) ev.getY();
onDrop(mLastY);
invalidate();
return true;
}
break;
default:
break;
}
return super.dispatchTouchEvent(ev);
}
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (mBitmap!=null&&!mBitmap.isRecycled()){
// 先绘制阴影
Bitmap bitmap = mBitmap.extractAlpha(mPaint, null);
mPaint.setAlpha(180);
canvas.drawBitmap(bitmap, 0, mLastY - mDragViewOffset-radius, mPaint);
// 再绘制位图
Paint paint = new Paint();
paint.setAlpha(180);
canvas.drawBitmap(mBitmap, 0, mLastY - mDragViewOffset, paint);
}
}
public boolean startDragOnLong(){
return startDrag(true, 0, mLastY);
}
public boolean startDrag(boolean isLong, int x, int y){
int tempPos = pointToPosition(0, y);
if(tempPos==INVALID_POSITION){
return false;
}
mLastPosition = mCurrentPosition = tempPos;
ViewGroup downView = (ViewGroup) getChildAt(mCurrentPosition - getFirstVisiblePosition());
if (downView != null) {
if(adapter==null){
adapter = (LDragAdapter) getAdapter();
}
if(isLong){
if (adapter==null || adapter.isTag(tempPos)){
return false;
}
}else {
if (adapter==null || !adapter.canDrag(tempPos, downView, x, y)){
return false;
}
}
// 触摸点在item项中的高度
mDragViewOffset = mDownY - downView.getTop();
downView.setDrawingCacheEnabled(true);
mBitmap = Bitmap.createBitmap(downView.getDrawingCache());
downView.setDrawingCacheEnabled(false);
mLastY = mDownY;
mLastX = mDownX;
mItemView = downView;
if (mItemView!=null){
mItemView.setVisibility(INVISIBLE);
}
isDragStatus = true;
return true;
}
return false;
}
public void onDrag(int moveY){
Log.e("dfafda", "movePos="+moveY);
if (moveY < 0) { // 限制触摸范围在ListView中
moveY = 0;
} else if (moveY > getHeight()) {
moveY = getHeight();
}
int movePos = pointToPosition(0,moveY);
if(movePos==INVALID_POSITION){
checkScroller(moveY); // listview移动.
return;
}
mLastY = moveY;
int dirCell = movePos > mLastPosition? 1 : -1; //1从上往下移动, -1反之
for (int i=mLastPosition;(dirCell>0)?i<=movePos:i>=movePos; i+=dirCell){
int index = i-getFirstVisiblePosition();
if(index>getChildCount() || index<0){
continue;
}
int y = getChildAt(index).getTop();
int temPos = pointToPosition(0, y);
if(temPos!=INVALID_POSITION){
mCurrentPosition = temPos;
}
// 数据交换
if (mCurrentPosition != mLastPosition) {
if (adapter==null){
adapter = (LDragAdapter) getAdapter();
}
if (adapter!=null){
if(adapter.exchange(mLastPosition, mCurrentPosition)){
View lastView = mItemView;
mItemView = getChildAt(mCurrentPosition - getFirstVisiblePosition());
//动画
exchangeAnimal(mLastPosition, mCurrentPosition, lastView, mItemView);
mLastPosition = mCurrentPosition;
}
}
}
}
checkScroller(moveY); // listview移动.
}
private int mAutoScrollUpY; // 拖动的时候,开始向上滚动的边界
private int mAutoScrollDownY; // 拖动的时候,开始向下滚动的边界
private int mTouchSlop;
/***
* 移动到底部或顶部时自动滚动列表
* 当移动到底部时,ListView向上滑动,当移动到顶部时,ListVidew要向下滑动
*/
public void checkScroller(final int y) {
int offset = 0;
if (y < mAutoScrollUpY) { // 拖动到顶部,ListView需要下滑
if (y <= mDownY - mTouchSlop) {
offset = dp2px(getContext(), 3); // 滑动的距离
}
} else if (y > mAutoScrollDownY) { // 拖动到底部,ListView需要上滑
if (y >= mDownY + mTouchSlop) {
offset = -dp2px(getContext(), 3); // 滑动的距离
}
}
Log.e("mLastScrollTime", offset+","+y+","+mAutoScrollDownY+","+mAutoScrollUpY+","+mDownY+","+mTouchSlop);
if (offset != 0) {
View view = getChildAt(mCurrentPosition - getFirstVisiblePosition());
if (view != null) {
// 滚动列表
setSelectionFromTop(mCurrentPosition, view.getTop() + offset);
}
}
}
public int dp2px(Context context, float dp) {
return (int) (context.getResources().getDisplayMetrics().density * dp + 0.5f);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mAutoScrollUpY = dp2px(getContext(), 80); // 取得向上滚动的边际,大概为该控件的1/3
mAutoScrollDownY = h - mAutoScrollUpY; // 取得向下滚动的边际,大概为该控件的2/3
}
void exchangeAnimal(int srcPosition, int position, View srcItemView, View itemView){
if (srcItemView!=null) {
int height = srcPosition > position ? -srcItemView.getHeight() : srcItemView.getHeight();
TranslateAnimation animation = new TranslateAnimation(0, 0, height, 0);
animation.setDuration(200);
srcItemView.clearAnimation();
srcItemView.startAnimation(animation);
srcItemView.setVisibility(View.VISIBLE);
}
if (itemView != null) {
itemView.setVisibility(View.INVISIBLE);
}
}
public void onDrop(int y){
if (mItemView != null) {
mItemView.setVisibility(View.VISIBLE);
if(Math.abs(y - mItemView.getTop()) > mItemView.getHeight() / 5 ){
AlphaAnimation animation = new AlphaAnimation(0.5f, 1);
animation.setDuration(150);
mItemView.clearAnimation();
mItemView.startAnimation(animation);
}
mItemView = null;
}
stopDrag();
}
public void stopDrag(){
if (mBitmap != null) {
mBitmap.recycle();
mBitmap = null;
}
if (mItemView != null) {
mItemView.setVisibility(View.VISIBLE);
mItemView = null;
}
}
}
LDragAdapter.java
package application.com.drag.widget;
import android.content.Context;
import android.graphics.Rect;
import android.os.Build;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
import application.com.drag.R;
public class LDragAdapter extends BaseAdapter {
private Context mContext;
private int finalAdded = 0;
private List<LDragItemClass> mAddedItems;
private List<LDragItemClass> mNotAddedItems;
public static final int TYPE_TAG = 0;
public static final int TYPE_ITEM = 1;
private String tag = "";
public LDragAdapter(Context context, ArrayList<LDragItemClass> added, ArrayList<LDragItemClass> notAdded) {
this.mContext = context;
mAddedItems = added;
mNotAddedItems = notAdded;
finalAdded = mAddedItems.size();
tag = String.format(context.getResources().getString(R.string.drag_tag_text), finalAdded);
}
@Override
public int getCount() {
return 1+finalAdded+mNotAddedItems.size();
}
@Override
public int getViewTypeCount() {
return 2;
}
@Override
public int getItemViewType(int position) {
if(position==finalAdded){
return TYPE_TAG;
}else {
return TYPE_ITEM;
}
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder=null;
if (convertView==null){
if (getItemViewType(position)==TYPE_ITEM){
convertView = LayoutInflater.from(mContext).inflate(R.layout.drag_list_item, null);
viewHolder = new ViewHolder(convertView);
}else {
convertView = LayoutInflater.from(mContext).inflate(R.layout.drag_list_item_tag, null);
viewHolder = new ViewHolder(convertView);
}
}else {
viewHolder = (ViewHolder) convertView.getTag();
}
LDragItemClass itemObj = getLDragItem(position);
if(getItemViewType(position)==TYPE_ITEM){
viewHolder.nameView.setText(itemObj.name);
}else {
viewHolder.nameView.setText(tag);
viewHolder.nameView.setEnabled(false);
}
return convertView;
}
class ViewHolder{
TextView nameView;
ImageView iconView;
public ViewHolder(View view){
nameView = (TextView)view.findViewById(R.id.drag_list_item_text);
view.setTag(this);
}
}
private LDragItemClass getLDragItem(int position){
if (position==finalAdded){
return null;
}
else if(position<finalAdded){
//add
return mAddedItems.get(position);
}else{
//not add
return mNotAddedItems.get(position-finalAdded-1);
}
}
public boolean isTag(int pos){
if( getItemViewType(pos)==TYPE_TAG){
return true;
}
return false;
}
public boolean canDrag(int pos, View dragView, int x, int y){
if( getItemViewType(pos)==TYPE_TAG){
return false;
}
else {
if (dragView == null) {
return false;
}
View dragger = dragView.findViewById(R.id.drag_list_item_drag);
if (dragger == null || dragger.getVisibility() != View.VISIBLE) {
return false;
}
float tx = x - getViewX(dragView);
float ty = y - getViewY(dragView);
Rect mFrame = new Rect();
dragger.getHitRect(mFrame);
if (mFrame.contains((int) tx, (int) ty)) { // 当点击拖拽图标才可进行拖拽
return true;
}
return false;
}
}
public boolean exchange(int scrPos, int desPos){
boolean success = false;
int count = mAddedItems.size();
if(scrPos==count || desPos==count){
return false;
}
if(scrPos!=desPos){
if(scrPos<count){
LDragItemClass srcObj = mAddedItems.get(scrPos);
if (desPos<count){
//change in add rang
LDragItemClass desObj = mAddedItems.get(desPos);
mAddedItems.set(scrPos, desObj);
mAddedItems.set(desPos, srcObj);
}else {
//change from add to notAdd
desPos = desPos-mAddedItems.size()-1;
LDragItemClass desObj = mNotAddedItems.get(desPos);
mAddedItems.set(scrPos, desObj);
mNotAddedItems.set(desPos, srcObj);
}
}else {
scrPos = scrPos-mAddedItems.size()-1;
LDragItemClass srcObj = mNotAddedItems.get(scrPos);
if (desPos<count){
//change from noTAdd to add
LDragItemClass desObj = mAddedItems.get(desPos);
mAddedItems.set(desPos, srcObj);
mNotAddedItems.set(scrPos, desObj);
}else {
//change in notAdd rang
desPos = desPos-mAddedItems.size()-1;
LDragItemClass desObj = mNotAddedItems.get(desPos);
mNotAddedItems.set(scrPos, desObj);
mNotAddedItems.set(desPos, srcObj);
}
}
success = true;
}
if (success) {
notifyDataSetChanged();
}
return success;
}
public float getViewX(View view) {
if (Build.VERSION.SDK_INT >= 11) {
return view.getX();
} else {
return view.getLeft() + view.getTranslationX();
}
}
public float getViewY(View view) {
if (Build.VERSION.SDK_INT >= 11) {
return view.getY();
} else {
return view.getTop() + view.getTranslationY();
}
}
}
上面三个文件,我们的自定义listView算是写完了,下面我们来看具体实现
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<application.com.drag.widget.LDragListView
android:id="@+id/id_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@drawable/list_item_divider"
android:dividerHeight="1px"
android:listSelector="@drawable/drag_list_selector"
>
</application.com.drag.widget.LDragListView>
</RelativeLayout>
我们在来看定义怎么定义itme和tag;
drag_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content">
<TextView
android:id="@+id/drag_list_item_text"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:paddingLeft="32dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
/>
<ImageView android:id="@+id/drag_list_item_drag"
android:src="@mipmap/dragicon"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:paddingRight="16dip"
android:layout_height="50dp" />
</RelativeLayout>
drag_list_item_tag.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00555555"
android:padding="5dip"
android:paddingLeft="10dip">
<!--文本框的ID保持不变-->
<TextView
android:id="@+id/drag_list_item_text"
android:layout_width="match_parent"
android:layout_height="20dip"
android:textColor="@android:color/darker_gray"
android:gravity="center"
android:textSize="11sp"
android:text="@string/drag_tag_text"/>
<!--去除来右边拖拽图像,分组标签是不能随意拖动的-->
</FrameLayout>
drawable包下定义:
drag_list_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 这个是按下去的时候item显示背景色 -->;
<item android:drawable="@color/itemColorPressed" android:state_pressed="true"></item>
<!-- 这个是默认的item背景色,设为了透明 -->
<item android:drawable="@android:color/transparent" android:state_pressed="false"></item>
</selector>
list_item_divider.xml
<?xml version="1.0" encoding="UTF-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="30dp"
android:insetRight="0dp"
android:drawable="@color/gray">
</inset>
我们来看最终的MainActivity的实现;
package application.com.drag;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import java.util.ArrayList;
import application.com.drag.widget.LDragAdapter;
import application.com.drag.widget.LDragItemClass;
import application.com.drag.widget.LDragListView;
public class MainActivity extends Activity {
private String data[] = new String[]{"WLAN","截屏","数据","GPS","静音","飞行模式","蓝牙","方向锁屏","自动亮度","手电筒","省电模式","快传","振动","屏蔽按键","勿扰模式","锁屏","同步","护眼模式"};
private LDragAdapter adapter = null;
private LDragListView listView = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化样本数据
initData();
}
void initData(){
ArrayList<LDragItemClass> addlist = new ArrayList<LDragItemClass>();
ArrayList<LDragItemClass> notAddlist = new ArrayList<LDragItemClass>();
for(int i=0; i<data.length; i++){
LDragItemClass item = new LDragItemClass();
item.name = data[i];
if(i>6){
notAddlist.add(item);
}else {
addlist.add(item);
}
}
adapter = new LDragAdapter(this, addlist, notAddlist);
listView = (LDragListView) findViewById(R.id.id_list);
listView.setAdapter(adapter);
listView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
Log.e("", "pos="+position);
listView.startDragOnLong();
return false;
}
});
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Log.e("", "pos="+position);
}
});
}
}
以上就算完成了,我们来张图片: