本文主要講述了利用android自定義控件實現瀑布流與水波紋效果

首先為實現效果，應了解touch事件在android中的傳遞機制

在執行touch事件時

首先執行dispatchTouchEvent方法，執行事件分發。

再執行onInterceptTouchEvent方法，判斷是否中斷事件，返回true時中斷，執行自己的onTouchEvnet方法.

最后執行onTouchEvent方法，處理事件

瀑布流實現

首先定義三個listView豎起排列，并且配置適配器

public class MainActivity extends Activity {private ListView lv1;private ListView lv2;private ListView lv3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);lv1 = (ListView) findViewById(R.id.lv1);lv2 = (ListView) findViewById(R.id.lv2);lv3 = (ListView) findViewById(R.id.lv3);try {lv1.setAdapter(new MyAdapter1());lv2.setAdapter(new MyAdapter1());lv3.setAdapter(new MyAdapter1());} catch (Exception e) {e.printStackTrace();}}private int ids[] = new int[] { R.drawable.default1, R.drawable.girl1,R.drawable.girl2, R.drawable.girl3 };class MyAdapter1 extends BaseAdapter {@Overridepublic int getCount() {return 3000;}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ImageView iv = (ImageView) View.inflate(getApplicationContext(),R.layout.lv_item, null);int resId = (int) (Math.random() * 4);iv.setImageResource(ids[resId]);return iv;}} }

布局文件的配置

<com.example.pinterestlistview.MyLinearLayout 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"android:id="@+id/mll"tools:context=".MainActivity" ><ListViewandroid:id="@+id/lv2"android:scrollbars="none"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1" /><ListViewandroid:id="@+id/lv1"android:scrollbars="none"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1" /><ListViewandroid:id="@+id/lv3"android:scrollbars="none"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1" /></com.example.pinterestlistview.MyLinearLayout>

自定義類截取事件分發

public class MyLinearLayout extends LinearLayout {public MyLinearLayout(Context context, AttributeSet attrs) {super(context, attrs);}@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {return true;}@Overridepublic boolean dispatchTouchEvent(MotionEvent ev) {return super.dispatchTouchEvent(ev);}@Overridepublic boolean onTouchEvent(MotionEvent event) {int width=getWidth()/getChildCount();int height = getHeight();int count=getChildCount();float eventX = event.getX();if (eventX<width){ // 滑動左邊的 listViewevent.setLocation(width/2, event.getY());getChildAt(0).dispatchTouchEvent(event);return true;} else if (eventX > width && eventX < 2 * width) { //滑動中間的 listView float eventY = event.getY();if (eventY < height / 2) {event.setLocation(width / 2, event.getY());for (int i = 0; i < count; i++) {View child = getChildAt(i);try {child.dispatchTouchEvent(event);} catch (Exception e) {e.printStackTrace();}}return true;} else if (eventY > height / 2) {event.setLocation(width / 2, event.getY());try {getChildAt(1).dispatchTouchEvent(event);} catch (Exception e) {e.printStackTrace();}return true;}}else if (eventX>2*width){event.setLocation(width/2, event.getY());getChildAt(2).dispatchTouchEvent(event);return true;}return true;}}

完成，運行效果如下

水波紋效果實現

要實現水波紋效果，只需用一個自定義控件填充整個Activity即可

<com.zj.wave.MyWaveandroid:layout_width="fill_parent"android:layout_height="fill_parent"/>

自定義控件實現

/*** 水波紋效果* @author leo**/ public class MyRingWave extends View{/*** 二個相臨波浪中心點的最小距離*/private static final int DIS_SOLP = 13;protected boolean isRunning = false;private ArrayList<Wave> wList;public MyRingWave(Context context, AttributeSet attrs) {super(context, attrs);wList = new ArrayList<MyRingWave.Wave>();}private Handler handler = new Handler(){public void handleMessage(android.os.Message msg) {//刷新數據flushData();//刷新頁面invalidate();//循環動畫if (isRunning) {handler.sendEmptyMessageDelayed(0, 50);}};};@Overrideprotected void onDraw(Canvas canvas) {for (int i = 0; i < wList.size(); i++) {Wave wave = wList.get(i);canvas.drawCircle(wave.cx, wave.cy, wave.r, wave.p);}}@Overridepublic boolean onTouchEvent(MotionEvent event) {super.onTouchEvent(event);switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE:int x = (int) event.getX();int y = (int) event.getY();addPoint(x,y);break;default:break;}return true; }/*** 添加新的波浪中心點* @param x* @param y*/private void addPoint(int x, int y) {if(wList.size() == 0){addPoint2List(x,y);/** 第一次啟動動畫*/isRunning = true;handler.sendEmptyMessage(0);}else{Wave w = wList.get(wList.size()-1);if(Math.abs(w.cx - x)>DIS_SOLP || Math.abs(w.cy-y)>DIS_SOLP){addPoint2List(x,y);}};}/*** 添加新的波浪* @param x* @param y*/private void addPoint2List(int x, int y) {Wave w = new Wave();w.cx = x;w.cy=y;Paint pa=new Paint();pa.setColor(colors[(int)(Math.random()*4)]);pa.setAntiAlias(true);pa.setStyle(Style.STROKE);w.p = pa;wList.add(w);}private int [] colors = new int[]{Color.BLUE,Color.RED,Color.YELLOW,Color.GREEN};/*** 刷新數據*/private void flushData() {for (int i = 0; i < wList.size(); i++) {Wave w = wList.get(i);//如果透明度為 0 從集合中刪除int alpha = w.p.getAlpha();if(alpha == 0){wList.remove(i); //刪除i 以后，i的值應該再減1 否則會漏掉一個對象，不過，在此處影響不大，效果上看不出來。continue;}alpha-=5;if(alpha<5){alpha =0;}//降低透明度w.p.setAlpha(alpha);//擴大半徑w.r = w.r+3;//設置半徑厚度w.p.setStrokeWidth(w.r/3);}/** 如果集合被清空，就停止刷新動畫*/if(wList.size() == 0){isRunning = false;}}/*** 定義一個波浪* @author leo*/private class Wave {//圓心int cx;int cy;//畫筆Paint p;//半徑int r;} }

完成，效果如下

總結

以上是生活随笔為你收集整理的自定义控件之瀑布流与水波纹实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。