2. 程式人生 > >ListView實現類似WheelView效果的探究

ListView實現類似WheelView效果的探究

阿新 • • 發佈：2019-02-04

不得不說，作為一名安卓碼農，總是會有蛋蛋的憂傷，因為CP常說的就是：你看，人家ios的那個效果好炫酷，比如下面這樣的

這裡寫圖片描述

程式碼已上Github，部分程式碼有所調整，以Github上程式碼為準

作為一名合格的碼農，實在不能忍，最後還是實現了這個效果，雖然沒有ios的厲害。。。

實現的思路還是不復雜的，主要分兩個方向：WheelView類似的思想（github一大堆）、ClipToPadding和ClipChildren取巧。因為我是用的取巧，所以我們下面只談第二種方法。

難點有兩個，一是精確地控制listview的item滾動到懸浮框內。因為大多數時候都不會是某個item剛好在懸浮框內的，但是唯一要考慮的情況也只有一種，即懸浮框內同時出現2個或多個item（設計需要，item的高度都是大於等於懸浮框的高度的，所以懸浮框內最多同時出現2個item，小於懸浮框的高度就會出現問題

），取出最適合停留的item（這是個相對概念，大家可以修改程式碼擴充套件），我目前需要的就是item中間位置的y值和懸浮檢視中間位置的y值最接近的一項，後面的程式碼裡大家會看到如何處理的；

二是當listview只有很少的項時，怎麼讓listview可以滾動呢？這就需要ClipToPadding和ClipChildren來幫忙了。不知道這兩個屬性的童鞋可以上網查一查，我相信你會受益良多。ClipToPadding=false，我對這個屬性簡單理解就是，當你為listview設定了padingTop、padingBottom屬性，listview會有pading的效果，但是當你滑動listview到頂部或底部時，listview的頂部或底部卻不會出現pading的那部分割槽域，即listview的內容不再被pading的區域遮蓋。ClipChildren=false，就是子檢視可以超出父檢視區域進行繪製。有了這兩個屬性，就可以解決listview item比較少時不能滾動的問題了。

由於設計需要滾動時item檢視的放大和縮小，所以把處理放到了onscrolllistener的onscroll方法裡，最後處理listview精確滾動的程式碼則要放到onscrolllistener的onScrollStateChanged方法裡，這些都是可以修改的。

因為要實現這個效果需要adapter配合，所以程式碼也比較亂，但是註釋還是比較詳細的，大家慢慢看。

先看看WheelListView

package com.ykbjson.demo.customview.listview;

import android.content.Context;
import android.util.AttributeSet;
import
 
 android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;

import com.ykbjson.demo.tools.SLog;

/**
 * 包名：com.ykbjson.demo.customview.listview
 * 描述：類似WheelView的ListView
 * 建立者：yankebin
 * 日期：2016/6/1
 */
public class WheelListView extends ListView {
    private static final int MAX_Y_OVERSCROLL_DISTANCE = 200;
    private final Object SCROLL_LOCK = new Object();
    //座標都是相對於手機螢幕
    private int topY;//懸浮框頂部座標
    private int middleY;//懸浮框中間座標
    private int bottomY;//懸浮框底部座標
    private int selectPosition;//滾動時adapter當前選中的position
    private boolean fromTouch;//當呼叫smoothScrollToPositionFromTop()方法時也會觸發onScroll，需要遮蔽掉
    private WheelAdapter wheelAdapter;//資料介面卡
    private OnSelectCallback callback;//滾動時的回撥介面
    private int mMaxYOverScrollDistance;

    public interface OnSelectCallback {
        void onHandleScroll(int selectPosition);

        void onHandleIdle(WheelListView wheelListView, int selectPosition);
    }

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

    public WheelListView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WheelListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
//        initBounceListView();
        setClipChildren(false);
        setClipToPadding(false);
    }

    /**
     * 阻尼效果實現
     */
//    private void initBounceListView(){
//        //get the density of the screen and do some maths with it on the max overscroll distance
//        //variable so that you get similar behaviors no matter what the screen size
//        final DisplayMetrics metrics = getContext().getResources().getDisplayMetrics();
//        final float density = metrics.density;
//        mMaxYOverScrollDistance = (int) (density * MAX_Y_OVERSCROLL_DISTANCE);
//    }
//
//    @Override
//    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent){
//        //This is where the magic happens, we have replaced the incoming maxOverScrollY with our own custom variable mMaxYOverScrollDistance;
//        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, mMaxYOverScrollDistance, isTouchEvent);
//    }

    public void setAdapter(WheelAdapter adapter) {
        super.setAdapter(adapter);
        wheelAdapter = adapter;
        setCallback(adapter);
    }

    private void setCallback(OnSelectCallback callback) {
        this.callback = callback;
    }

    /**
     * 初始化
     *
     * @param selectView
     * @param rootView
     */
    protected void setUp(View selectView, View rootView) {
        if (null == selectView || null == rootView) {
            return;
        }
        //讓listview現實的區域剛好和懸浮框重合
        setPadding(0, selectView.getTop() , 0, rootView.getBottom() - selectView.getBottom() );

        int location1[] = new int[2];
        selectView.getLocationOnScreen(location1);

        topY = location1[1];
        middleY = topY + selectView.getMeasuredHeight() / 2;
        bottomY = topY + selectView.getMeasuredHeight();

        setUpScroll();
    }

    /**
     * 設定滾動監聽
     */
    private void setUpScroll() {
        setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                if (null == callback) {
                    return;
                }
                if (scrollState == SCROLL_STATE_IDLE) {
                    if (!fromTouch) {
                        return;
                    }
                    fromTouch = false;
                    SLog.d("SCROLL_STATE_IDLE");
                    //adapter實現了callback介面
                    callback.onHandleIdle(WheelListView.this,selectPosition);
                } else if (scrollState == SCROLL_STATE_TOUCH_SCROLL) {
                    fromTouch = true;
                }
            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                if (null == callback) {
                    return;
                }
                if (!fromTouch) {
                    return;
                }
                synchronized (SCROLL_LOCK) {
                    handleScroll(firstVisibleItem);
                }
            }
        });
    }

    /**
     * 處理滾動
     *
     * @param firstVisibleItem
     */
    private void handleScroll(int firstVisibleItem) {
        //取出與中線距離最近的item
        int tempD = -1;
        //本次滑動計算出的position
        int tempP = -1;
        //遍歷listview當前可見的item，不是所有item
        for (int i = 0; i < getChildCount(); i++) {
            //計算每個item相對於螢幕的座標值
            View child = getChildAt(i);
            int location2[] = new int[2];
            child.getLocationOnScreen(location2);
            int childBottom = location2[1] + child.getMeasuredHeight();
            int childTop = location2[1];
            //            SLog.d("bottomY : " + bottomY + " topY : " + topY + " middleY : " + middleY + " childBottom : " + childBottom + " childTop : " + childTop);
            //在懸浮框區域外的，排除掉
            if (childBottom < topY || childTop > bottomY) {
                continue;
            }
            //找到item中線離懸浮框中線最近的item，比距離即可
            int childMiddleY = childBottom - child.getMeasuredHeight() / 2;
            int position = firstVisibleItem + i;//當前item真正的position
            int distance = Math.abs(middleY - childMiddleY);
            if (tempD == -1) {
                tempD = distance;
                tempP = position;
            } else if (tempD > distance) {
                tempD = distance;
                tempP = position;
            }
        }

        if (tempP < 0) {
            tempP = 0;
        } else if (tempP > wheelAdapter.getCount() - 1) {
            tempP = wheelAdapter.getCount() - 1;
        }
        //防止多次notify同一個position
        if (selectPosition == tempP) {
            return;
        }
        selectPosition = tempP;
        callback.onHandleScroll(selectPosition);
    }
}

再看看WheelAdapter

package com.ykbjson.demo.customview.listview;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

import com.drivingassisstantHouse.library.base.SimpleAdapterHolder;

import java.util.List;

/**
 * 包名：com.ykbjson.demo.customview.listview
 * 描述：類似WheelView的ListView的adapter
 * 建立者：yankebin
 * 日期：2016/6/1
 */
public abstract class WheelAdapter<T> extends BaseAdapter implements WheelListView.OnSelectCallback {

    /**
     * 資料來源
     */
    private List<T> mData;
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * item佈局索引
     */
    private int layoutId;


    public Context getmContext() {
        return mContext;
    }

    public void setmContext(Context mContext) {
        this.mContext = mContext;
    }

    public List<T> getmData() {
        return mData;
    }

    public void setmData(List<T> data) {
        this.mData = data;
    }

    public int getLayoutId() {
        return layoutId;
    }

    public void setLayoutId(int layoutId) {
        this.layoutId = layoutId;
    }


    /**
     * @param context 上下文
     * @param data    資料來源
     * @param id      item的佈局資原始檔
     */
    public WheelAdapter(Context context, List<T> data, int id) {
        this.mContext = context;
        this.mData = data;
        this.layoutId = id;
    }

    /**
     * 資料來源改變，重新整理介面
     *
     * @param data
     */
    public void refersh(List<T> data) {
        this.mData = data;
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        if (mData != null) {
            return mData.size();
        }
        return 0;
    }

    @Override
    public T getItem(int position) {
        if (mData != null) {
            return mData.get(position);
        }
        return null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        SimpleAdapterHolder holder = SimpleAdapterHolder.get(convertView, parent, layoutId,
                position);
        covertView(holder, position, mData, getItem(position));
        return holder.getmConvertView();
    }

    /**
     * 子類可重寫此方法實現不同的滾動效果
     * @param wheelListView
     * @param selectPosition
     */
    @Override
    public void onHandleIdle(WheelListView wheelListView, int selectPosition) {
        notifyDataSetChanged();
        //精確滾動到某個item的方法，其他的請看api
        wheelListView.smoothScrollToPositionFromTop(selectPosition, 0, 400);
    }

    public abstract void covertView(SimpleAdapterHolder holder, int position, List<T> dataSource, T data);
}

SimpleAdapterHolder其實就是一般的viewHolder

import android.util.SparseArray;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 包名：com.ykbjson.demo.customview.listview
 * 描述：通用viewholder
 * 建立者：yankebin
 * 日期：2016/6/1
 */
public class SimpleAdapterHolder {

    @SuppressWarnings("unused")
    private int mPosition;
    private View mConvertView;
    SparseArray<View> mMembers;

    public View getmConvertView() {
        return mConvertView;
    }

    public SimpleAdapterHolder() {

    }

    private SimpleAdapterHolder(ViewGroup parent, int layoutId, int position) {
        this.mPosition = position;
        this.mMembers = new SparseArray<View>();
        mConvertView = LayoutInflater.from(parent.getContext()).inflate(
                layoutId, parent, false);

        mConvertView.setTag(this);
    }

    public static SimpleAdapterHolder get(View convertView, ViewGroup parent,
            int layoutId, int position) {
        if (convertView == null) {
            return new SimpleAdapterHolder(parent, layoutId, position);
        } else {
            return (SimpleAdapterHolder) convertView.getTag();
        }
    }

    @SuppressWarnings("unchecked")
    public <T extends View> T getView(int viewId) {
        View view = mMembers.get(viewId);
        if (view == null) {
            view = mConvertView.findViewById(viewId);
            mMembers.put(viewId, view);
        }
        return (T) view;
    }
}

為了使用方便，我在外面包裝了一層WheelView

package com.ykbjson.demo.customview.listview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.ykbjson.demo.R;
import com.ykbjson.demo.tools.SLog;

/**
 * 包名：com.ykbjson.demo.customview.otherview
 * 描述：滾輪檢視
 * 建立者：yankebin
 * 日期：2016/6/2
 */
public class WheelView extends FrameLayout {
    private WheelListView wheelListView;
    private View mSelectView;

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

    public WheelView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WheelView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    /**
     * 初始化檢視
     *
     * @param context
     * @param attrs
     */
    private void initView(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WheelView);
        int floatId = typedArray.getResourceId(R.styleable.WheelView_float_layout, -1);
        int bgId = typedArray.getResourceId(R.styleable.WheelView_background_resources, -1);
        SLog.d("bgId : " + bgId);
        typedArray.recycle();
        if (-1 == floatId) {
            throw new IllegalArgumentException("resId is invalid");
        }
        //背景
        ImageView imageView = new ImageView(context);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        try {
            imageView.setLayerType(LAYER_TYPE_SOFTWARE, null);
        } catch (Exception e) {
            e.printStackTrace();
        }

        if (-1 != bgId) {
            imageView.setImageResource(bgId);
        }
        FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(-1, -1);
        addView(imageView, params);

        //listview
        wheelListView = new WheelListView(context);
        wheelListView.setBackgroundColor(Color.TRANSPARENT);
        wheelListView.setClipToPadding(false);
        wheelListView.setClipChildren(false);
        params = new FrameLayout.LayoutParams(-1, -1);
        params.gravity = Gravity.CENTER;
        addView(wheelListView, params);

        //懸浮檢視
        mSelectView = LayoutInflater.from(context).inflate(floatId, this, false);
        params = new FrameLayout.LayoutParams(-1, -2);
        params.gravity = Gravity.CENTER;
        addView(mSelectView, params);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        wheelListView.setUp(mSelectView, this);
    }

    public void setAdapter(WheelAdapter adapter) {
        wheelListView.setAdapter(adapter);
    }

    public WheelListView getWheelListView() {
        return wheelListView;
    }
}

定義的屬性

 <!-- 仿wheelview的listvie-->
    <declare-styleable name="WheelView">
        <attr name="float_layout" format="reference" />
        <attr name="background_resources" format="reference|color" />
    </declare-styleable>

最後的使用

在xml裡

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <com.ykbjson.demo.customview.listview.WheelView
        app:float_layout="@layout/layout_scroll_list"
        app:background_resources="@drawable/trip_bg"
        android:id="@+id/wheel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

在程式碼裡

package com.ykbjson.demo.activity;

import android.content.Context;
import android.os.Bundle;
import android.os.Message;
import android.view.View;
import android.widget.TextView;

import com.drivingassisstantHouse.library.base.BaseActivity;
import com.drivingassisstantHouse.library.base.SimpleAdapterHolder;
import com.nineoldandroids.view.ViewHelper;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.ykbjson.demo.R;
import com.ykbjson.demo.bean.AssistantManager;
import com.ykbjson.demo.customview.listview.WheelAdapter;
import com.ykbjson.demo.customview.listview.WheelView;
import com.ykbjson.demo.customview.otherview.CircleImageView;

import java.util.ArrayList;
import java.util.List;

import butterknife.Bind;

/**
 * 包名：com.ykbjson.demo.activity
 * 描述：
 * 建立者：yankebin
 * 日期：2016/5/25
 */
public class TestTravelListActivity extends BaseActivity {
    @Bind(R.id.wheel)
    WheelView wheel;
    private ArrayList<AssistantManager> assistantManagers = new ArrayList<>();
    private TravelListAdapter adapter;


    private void dataChange() {
        adapter = new TravelListAdapter(this, assistantManagers, R.layout.item_assistant_avatar);
        wheel.setAdapter(adapter);

    }


    @Override
    public int bindLayout() {
        return R.layout.activity_scroll_list;
    }

    @Override
    public void initParms(Bundle parms) {

    }


    @Override
    public void initView(View view) {
        for (int i = 0; i < 2; i++) {
            AssistantManager manager = new AssistantManager();
            manager.setMobile("15208279347");
            manager.setName("客服" + i);
            manager.setNickName("簡途客戶" + i);
            manager.setAssistantId(i);
            manager.setAvatar("drawable://" + R.drawable.customer_service_head);
            manager.setPhoto("drawable://" + R.drawable.ad_page);
            manager.setDescription("呵呵呵呵 的期望的開啟電腦去");
            manager.setType(i % 2 == 0 ? 0 : 1);
            manager.setTourismSections("成都-都江堰-青城山");
            assistantManagers.add(manager);
        }
    }


    @Override
    public void doBusiness(Context mContext) {
        baseHandler.sendEmptyMessageDelayed(1, 200);
    }

    @Override
    public void resume() {

    }

    @Override
    public void destroy() {
    }

    @Override
    public void handleMessage(Message msg) {
        dataChange();
    }

    /*主要程式碼**/
    private class TravelListAdapter extends WheelAdapter<AssistantManager> {
        private int mSelectPosition;

        /**
         * @param context 上下文
         * @param data    資料來源
         * @param id      item的佈局資原始檔
         */
        public TravelListAdapter(Context context, List data, int id) {
            super(context, data, id);
        }

        @Override
        public void onHandleScroll(int selectPosition) {
            mSelectPosition = selectPosition;
            notifyDataSetChanged();
        }

        @Override
        public void covertView(SimpleAdapterHolder holder, int position, List<AssistantManager> dataSource, AssistantManager manager) {
            float scale = 1f;
            if (mSelectPosition == position) {
                scale = 1.2f;
            }
            TextView tvName = holder.getView(R.id.tv_name);
            tvName.setText(manager.getName());
            CircleImageView imageView = holder.getView(R.id.iv_avatar);
            ImageLoader.getInstance().displayImage(manager.getAvatar(), imageView);

            ViewHelper.setScaleX(holder.getmConvertView().findViewById(R.id.layout_content), scale);
            ViewHelper.setScaleY(holder.getmConvertView().findViewById(R.id.layout_content), scale);
        }
    }
}

相關推薦

ListView實現類似WheelView效果的探究

不得不說，作為一名安卓碼農，總是會有蛋蛋的憂傷，因為CP常說的就是：你看，人家ios的那個效果好炫酷，比如下面這樣的 程式碼已上Github，部分程式碼有所調整，以Github上程式碼為準 作為一名合格的碼農，實在不能忍，最後還是實現了這個效

利用ListView實現類似物流詳情的進度顯示

class cnblogs bsp idt ges height eight 效果圖 進度顯示 實現效果圖： 一、UI實現 布局文件： 二、數據實現 利用ListView實現類似物流詳情的進度顯示

Android基礎控件——ListView實現時間軸效果

fcm https size ont cti 組裝 ron down fontsize ListView實現時間軸效果 實現思路： 該View是通過ListView實現的，通過實體兩個字段內容content和時間time來展示每個ListItem 時間軸是使用上面一

WPF 基於Adorner實現類似Popup效果

1.  什麼是Adorner      裝飾器是一種特殊型別的FrameworkElement，可用來向用戶提供可視提示。 裝飾器有很多用途，可用來向元素新增功能控制代碼，或者提供有關某個控制元件的狀態資訊。   2.&nb

實現類似toast效果的圓角dialog警告框

轉自：http://blog.csdn.net/u011007829/article/details/47293597 在最近的專案中需要用到一個類似於toast效果的警告框，而且還要是圓角的。下面是我實現的效果截圖： 首先定義一個dialog：

React Native之ListView實現九宮格效果

概述在安卓原生開發中，ListView是很常用的一個列表控制元件，那麼React Native（RN）如何實現該功能呢？我們來看一下ListView的原始碼ListView是基於ScrollView擴充套件得來的，所以具有ScrollView的相關屬性：dataSource：

React Native 基礎 之ListView實現吸頂效果

當滑動時，這個section header會固定在頭部，也就是吸頂效果。但是遺憾的是，在Android平臺上不支援吸頂效果 實現吸頂效果需要用到此方法 cloneWithRowsAndSections(dataBlob, sectionIdentities, rowIde

Android 中使用 RecyclerView + SnapHelper 實現類似 ViewPager 效果

寫在前面:強大的Recyclerview,官方提供的幫助類. 1 前言 在 一些特定的場景下，如照片的瀏覽，卡片列表滑動瀏覽，我們希望當滑動停止時可以將當前的照片或者卡片停留在螢幕中央，以吸引使用者的焦點。在 Android 中，我們可以使用RecyclerView

Android自定義View之ListView實現時間軸效果：我只是個送快遞的。

先上效果圖： 實現時間軸的原理 listview的基本使用，相信大家都很熟悉。先在layout下新建一個xml佈局檔案，對應一個子項的listView的顯示內容。在上面的圖我們可以看到，每一項都是 有3個 textview控制元件

Android ListView實現類似朋友圈的複雜佈局

開發中時常會遇到用ListView實現類似朋友圈列表的複雜佈局，如果一個條資訊即為ListView中一項時，那麼單個佈局的結構會變的很複雜，也會影響列表滾動的流暢性。由於Adapter可以使用多種佈局，所以這裡採用的方式是將單個資訊的佈局拆分為多個ListView的item

安卓開發中使用ListView實現類似QQ聊天框（總結）

效果如下：（現在有點醜，至於每個item的背景，可以自己處理圖片）思路：看見上圖的效果，既然是兩種不同的效果，肯定是要用資料介面卡的。MutiLayoutAdapter.java的程式碼如下：package com.deepreality.mutilayoutadapterd

Android 中的用HorizontalScrollView佈局實現類似Gallery效果

setAdjustViewBounds 是否保持寬高比。需要與maxWidth、MaxHeight一起使用，否則單獨使用沒有效果。 以前也使用過Gallery，最初自己的想法也是使用這個，再讓使用

Vue.js+cube-ui（Scroll元件）實現類似頭條效果的橫向滾動導航條

本博主在一次個人移動端專案中，遇到這麼一個需求：希望自己的專案中，頭部導航條的效果可以像今日頭條那樣，橫向滾動! 對於這樣的效果，在各大移動端專案中幾乎是隨處可見，為什麼呢？        我們都知道，對於移動端也就是手機上，我們頁面的寬度並不像PC端那樣大，可以顯

Android自定義View——實現水波紋效果類似剩余流量球

string 三個點 pre ber block span 初始化 move 理解 最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧： 效果圖鎮樓 一：先一步一步來分解一下實現的過程 需要繪制一個正弦曲線(sin

html5 postMessage 實現類似 sendMessage 的同步效果，支持跨域

ase HA input itl ner button () function inpu 實現一個客戶端發送 “1+2“ 跨域的另一個頁面中，回調返回”3“的場景。 客戶端：請在 http://127.0.0.1/pk/in

UWP：使用Composition實現類似安卓的水波紋Ripple效果

nal tcl sset .cn math point ont .com ubi 原文:UWP：使用Composition實現類似安卓的水波紋Ripple效果先放效果圖： 首先，建立一個RippleHelper.cs文件，然後建立以下附加屬性： IsFillEnab

實現左上角類似標籤效果

效果圖： <div class="content"> <div class="t-right-new"><p>最新</p></div> </div> .content{ position: rela

js實現類似TabPage切換的效果

首先宣告：這個js演算法的原理並非原創，這裡只是學習實現的效果和原理！尊重原創，原創作者無從考證，多個開源的類似後臺管理系統中都有這個多iframe的效果，且實現的效果一致，都採用了相同的演算法版本。本人只是學習瞭解之後，做了一個精簡版的還原。 首先核心的js實現程式碼如下： $(fu

【Unity】實現類似皇室戰爭使用“火球”將敵人“炸開”效果

今天做了一個皇室戰爭使用“火球”攻擊敵人的效果，當然是簡易版的。也是跟上一篇博文有聯絡。 玩過皇室戰爭的人都知道這張卡片，當火球爆炸的時候會將敵人“炸開”，也就是將敵人推開，把對方的陣型打亂 步驟一：製作一個會“變大變小”的小球 為什麼要讓小球變大變小呢，因為Demo是2D的所

SwipeMenuListView實現類似於QQ側滑刪除效果

前言：最近，因為專案需要實現刪除功能，為了美觀採用了類似於QQ的那種側滑刪除效果，使用的是SwipeMenuListView的開源控制元件，現將使用方法記錄分享一下，有興趣的童鞋可以看看。效果如下圖： 1、新增依賴 方法1：下載開源庫程式碼，將程式碼複