滑动控件自定义使用

[java] view plain copy

1. public class SlideThreeSelectView extends RelativeLayout {  
2.   
3.     @InjectView(R.id.cartype_background)  
4.     ImageView mBackgroundView;  
5.   
6.     @InjectView(R.id.cartype_car)  
7.     ImageView mCarTypeView;  
8.   
9.     private DisplayMetrics mdDisplayMetrics;  
10.   
11.     private int mHalfScreenWidth;  
12.   
13.   
14.     public SlideThreeSelectView(Context context) {  
15.         this(context, null);  
16.     }  
17.   
18.     public SlideThreeSelectView(Context context, AttributeSet attrs) {  
19.         super(context, attrs);  
20.         init();  
21.     }  
22.   
23.     private void init() {  
24.         initView();  
25.         initListener();  
26.     }  
27.   
28.   
29.   
30.     private void initView() {  
31.         View view = View.inflate(getContext(), R.layout.select_three_cartype_view, this);  
32.         ButterKnife.inject(view);  
33.         mdDisplayMetrics = new DisplayMetrics();  
34.         mdDisplayMetrics = getResources().getDisplayMetrics();  
35.         mHalfScreenWidth = mdDisplayMetrics.widthPixels / 2;  //获取一般屏幕宽度  
36.     }  
37.   
38.   
39.     private void initListener() {  
40.         //为本就添加onTouch事件是为了响应点击车出现popupwindow显示车辆详情  
41.         mBackgroundView.setOnTouchListener(new OnTouchListener() {  
42.   
43.             @Override  
44.             public boolean onTouch(View v, MotionEvent event) {  
45.   
46.                 int backgroundWidth = mBackgroundView.getWidth();  
47.   
48.                 int offSetLength = backgroundWidth / 4;  
49.   
50.                 int carTypeViewHalfLength = mCarTypeView.getWidth() / 2;  
51.   
52.                 int carTypeViewHigh = mCarTypeView.getHeight();  
53.   
54.                 switch (event.getAction()) {  
55.                     case MotionEvent.ACTION_UP:  
56.                         int upX = (int) event.getRawX();  
57.                         updateCarTypeStatus(offSetLength, carTypeViewHalfLength, carTypeViewHigh, upX);  
58.                         break;  
59.   
60.                     default:  
61.                         break;  
62.                 }  
63.                 return true;  
64.             }  
65.         });  
66.   
67.         mCarTypeView.setOnTouchListener(new OnTouchListener() {  
68.   
69.             private int mStartX = 0; //x记录起始位置  
70.   
71.             @Override  
72.             public boolean onTouch(View v, MotionEvent event) {  
73.   
74.                 int backgroundLeft = mBackgroundView.getLeft();  //背景左边坐标  
75.   
76.                 int backgroundWidth = mBackgroundView.getWidth();  //背景宽度  
77.   
78.                 int offSetLength = backgroundWidth / 4;   //背景1/4宽度  
79.   
80.                 int carTypeViewHalfLength = mCarTypeView.getWidth() / 2;  //车辆宽度  1/2  
81.   
82.                 int carTypeViewHigh = mCarTypeView.getHeight(); //车辆高度  
83.   
84.                 int upX;   //为了在松开手时车辆弹回使用  
85.   
86.                 switch (event.getAction()) {  
87.                     case MotionEvent.ACTION_DOWN:  
88.                         mStartX = (int) event.getRawX();    //按下时的x轴坐标  
89.                         break;  
90.                     case MotionEvent.ACTION_MOVE:  
91.                         int newX = (int) event.getRawX(); //移动时 x坐标  
92.                         int dX = newX - mStartX;    //移动坐标 - 按下坐标  记录偏移量  
93.                         int newl = mCarTypeView.getLeft() + dX;  //车辆图片加入left right添加偏移量  
94.                         int newr = mCarTypeView.getRight() + dX;  
95.                         if (newl <= backgroundLeft || newr > (backgroundLeft + backgroundWidth)) {  // 左侧坐标偏移过背景左侧，右侧坐标偏移过背景右侧，不处理  
96.                             break;  
97.                         }  
98.                         mCarTypeView.layout(  
99.                                 mCarTypeView.getLeft() + dX,  
100.                                 mCarTypeView.getTop(),  
101.                                 mCarTypeView.getRight() + dX,  
102.                                 mCarTypeView.getBottom());     //将坐标设置进去 实现车辆跟随手指移动，只是移动了x轴，top bottom不变  
103.                         mStartX = (int) event.getRawX();   //记录x新的起始位置  
104.                         break;  
105.                     case MotionEvent.ACTION_CANCEL://个人理解这个状态是 甩手的 状态跟 up类似  
106.                         upX = (int) event.getRawX();  
107.                         updateCarTypeStatus(offSetLength, carTypeViewHalfLength, carTypeViewHigh, upX);  
108.                         break;  
109.                     case MotionEvent.ACTION_UP:  
110.                         upX = (int) event.getRawX();  //手指抬起时记录 抬起时x轴的位置  
111.                         updateCarTypeStatus(offSetLength, carTypeViewHalfLength, carTypeViewHigh, upX);  
112.                         break;  
113.   
114.                     default:  
115.                         break;  
116.                 }  
117.                 return true;  //如果让车子响应onclick方法这个要返回false  
118.             }  
119.   
120.         });  
121.   
122.     }  
123.   
124.   
125.     /** 
126.      * 手指抬起后，实现车辆回弹。不能你拖到哪里就在哪里，那样有点太尴尬了 --- 这里的定位方式是要画图说明的 
127.      * @param offSetLength 
128.      * @param carTypeViewHalfLength 
129.      * @param carTypeViewHigh 
130.      * @param upX 
131.      */  
132.     private void updateCarTypeStatus(int offSetLength, int carTypeViewHalfLength, int carTypeViewHigh, int upX) {  
133.         if (upX < mHalfScreenWidth - offSetLength) {  //如果在中间偏左，那就定位在左边  
134.             mCarTypeView.layout(  
135.                     mBackgroundView.getLeft(),  
136.                     mBackgroundView.getTop(),  
137.                     mBackgroundView.getLeft() + (2 * carTypeViewHalfLength),  
138.                     mBackgroundView.getTop() + carTypeViewHigh);  
139.         } else if (upX >= (mHalfScreenWidth - offSetLength) && upX <= (mHalfScreenWidth + offSetLength)) {  //如果在中间，那就定位在中间  
140.             mCarTypeView.layout(  
141.                     mBackgroundView.getLeft() + (2 * offSetLength) - carTypeViewHalfLength,  
142.                     mBackgroundView.getTop(),  
143.                     mBackgroundView.getLeft() + (2 * offSetLength) + carTypeViewHalfLength,  
144.                     mBackgroundView.getTop() + carTypeViewHigh);  
145.   
146.         } else if (upX > (mHalfScreenWidth + offSetLength)) {  //如果在中间偏右，那就定位在右边  
147.             mCarTypeView.layout(  
148.                     mBackgroundView.getLeft() + (4 * offSetLength) - (2 * carTypeViewHalfLength),  
149.                     mBackgroundView.getTop(),  
150.                     mBackgroundView.getLeft() + (4 * offSetLength),  
151.                     mBackgroundView.getTop() + carTypeViewHigh);  
152.         }  
153.     }  
154. }  

绘制view思路