1. 程式人生 > >水波紋的製作,是通過畫線

水波紋的製作,是通過畫線

插入圖片

 

 

 

mainactivity

public class MainActivity extends AppCompatActivity {

    private TabLayout tblHome;
    private ViewPager vpHome;

    private List<Fragment> fragmentList;
    private List<String> titles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        initView();
        initData();

    }

    private void initData() {
        fragmentList = new ArrayList<>();
        titles = new ArrayList<>();

        fragmentList.add(new HomeFragment());
        fragmentList.add(new CategoryFragment());
        fragmentList.add(new MineFragment());

        titles.add("首頁");
        titles.add("分類");
        titles.add("我的");


        vpHome.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }

            @Override
            public int getCount() {
                return fragmentList.size();
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titles.get(position);
            }
        });

        tblHome.setTabMode(TabLayout.MODE_FIXED);
        tblHome.setupWithViewPager(vpHome);

    }

    private void initView() {
        tblHome = findViewById(R.id.tbl_bottom);
        vpHome = findViewById(R.id.vp_home);
    }
}

 

waveview

public class WaveView extends View {
    private Paint paint;
    private Path path;

    private int A = 0;
    private float fai;

    public WaveView(Context context) {
        this(context, null);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, @Nullable AttributeSet attrs) {

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.WaveViewStyle);
        int color = a.getColor(R.styleable.WaveViewStyle_stroke_color, Color.WHITE);
        a.recycle();

        paint = new Paint();
        paint.setColor(color);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);

        path = new Path();
    }

    public interface OnWaveChangeListener {
        void onChange(float y);
    }

    private OnWaveChangeListener listener;

    public void setOnWaveChangeListener(OnWaveChangeListener listener) {
        this.listener = listener;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // y = Asin(Ωx+φ)+k

        fai -= 0.1f;

        // 重置路徑
        path.reset();
        // 移動到左下角的位置
        path.moveTo(getLeft(), getBottom());

        for (int x = 0; x < getMeasuredWidth(); x += 20) {
            float y = A * (float) (Math.sin(2 * Math.PI / getMeasuredWidth() * x + fai)) + A;
            if (x > getMeasuredWidth() / 2 - 10 && x < getMeasuredWidth() / 2 + 10) {
                if (listener!= null) {
                    listener.onChange(y);
                }
            }

            path.lineTo(x, y);
        }

        path.lineTo(getRight(), getBottom());

        canvas.drawPath(path, paint);


        postInvalidateDelayed(50);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        A = MeasureSpec.getSize(heightMeasureSpec) / 2;
    }
}

 

fragment

public class HomeFragment extends Fragment {
    private ImageView imgLogo;
    private WaveView wv;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_home, container, false);
        imgLogo = v.findViewById(R.id.img_logo);
        wv = v.findViewById(R.id.wv);
        return v;
    }


    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        wv.setOnWaveChangeListener(new WaveView.OnWaveChangeListener() {
            @Override
            public void onChange(float y) {
                RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) imgLogo.getLayoutParams();
                layoutParams.bottomMargin = -(int) y;
                imgLogo.setLayoutParams(layoutParams);
            }
        });
    }
}

 

//畫圓

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="2dp"
        android:color="#4d4949"></stroke>

    <corners android:radius="20dp" />

</shape>

 

//fragment 顯示的xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_search"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher_round" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@null" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <com.bwie.git1008.widget.WaveView
            android:id="@+id/wv"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:layout_alignParentBottom="true"
            app:stroke_color="#e6119b" />

        <ImageView
            android:id="@+id/img_logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/wv"
            android:layout_centerHorizontal="true"
            android:src="@mipmap/ic_launcher" />
    </RelativeLayout>

</LinearLayout>

 

mainxml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tbl_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/tbl_bottom"></android.support.v4.view.ViewPager>

</RelativeLayout>