酷狗app高仿系列

最新推荐文章于 2022-03-23 16:39:52 发布

whtp

最新推荐文章于 2022-03-23 16:39:52 发布

阅读量2.7k

点赞数 2

分类专栏：高仿系列文章标签： ui app

本文链接：https://blog.csdn.net/u013171787/article/details/47858385

版权

高仿系列专栏收录该内容

3 篇文章 0 订阅

订阅专栏

好。。。从今天开始写博客。

下了下酷狗发现很不错啊，交互流畅，ui美观，那就从它开刀。先来个高仿篇。。。。
这是它的侧滑效果
下面是首页，画了框的就是感兴趣的地方v
这是它的首页，是不是赞，更赞的不是背景图，是他的框架

好咱们先分析下他的结构，它的侧滑更qq差不多，就是多了个耳朵view在动，
还有就是在右边（我擦。。。是个人都知道的区别）。那么分析如果没有那个耳朵view再动是不是很简单啊，
用脚趾一想自定viewgroup，重写LinearLayout，重写HrizontalScrollview。。。。
是不是有很多方案。但是多了一个耳朵view LinearLayout就不太合适了。
因为不好布局是吧，重写viewGroup又太麻烦，那咱还是拿简单的HrizontalScrollview来开刀吧。
但是HrizontalScrollview可选的子view又是个要思考下的问题，
因为他不但有FrameLayout的功能还有灵活布置位置的功能。**

第一次使用markdown，有点生，擦就放这里吧

<!--这是侧滑的horizontalScrollview-->
<com.example.kugou.view.MenuHorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/menu_horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    tools:context="com.example.kugou.MainActivity" >

    <!--这是最外层的relativelayout ,为什么要自定义呢，博客等下会说-->
    <com.example.kugou.view.MenuRelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#55ff0000" >

        <!--会动的那个耳朵view-->
        <ImageView
            android:id="@id/main_menu_icon_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@id/main_content_id"
            android:src="@drawable/ic_launcher" />

        <!--内容区域-->
        <RelativeLayout
            android:id="@id/main_content_id"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ccc" >


        </RelativeLayout>

        <!--菜单区域-->
        <LinearLayout
            android:id="@id/main_menu_id"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toRightOf="@id/main_content_id"
            android:orientation="vertical" >


        </LinearLayout>
    </com.example.kugou.view.MenuRelativeLayout>

</com.example.kugou.view.MenuHorizontalScrollView>

这里有好几个id是定义在res下的因为这样方便侧滑控件的重复使用，
这个layout的作用起到一个框架的作用，搭了一个架子，
相当于现在做房子做了个水泥柱，没有砌砖。
哦。。差点忘记了，id定义在res还有个作用是那个耳朵view是在relativelayout的第一个位置的，
如果直接写@+id的话编译器是会报错的。
好，该我们的侧滑控件MenuHorizontalScrollView登场了。。。。
首先来分析下这侧滑控件要做的事情：
1.能够滑动，且能够到一定位置时滚动到指定的位置，即menu的open和close。
（废话，侧滑没有这个功能还叫侧滑吗。。。）
2.要解决垂直滚动和水平滚动的冲突
暂时先是这两个问题
好，开始我们的coding



public class MenuHorizontalScrollView extends HorizontalScrollView {

    /*这里设置menu为屏幕宽4/5*/
    private final float menuScale = 4 / 5f;
    private final int INVALID_POINTER = -1;
    private int screenWidth;
    private int menuViewWidth;
    private int iconViewWidth;
    private boolean isOpen;
    /*拿到contentChild和menuChild  好做一些动画*/
    private ViewGroup contentChild;
    private ViewGroup menuChild;
    private View iconView;
    /*解决滑动冲突东东*/
    private int mActivePointerId;
    private float mInitialMotionX;
    private float mInitialMotionY;


    public MenuHorizontalScrollView(Context context) {
        this(context, null);
        // TODO Auto-generated constructor stub
    }

    public MenuHorizontalScrollView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        // TODO Auto-generated constructor stub
    }

    public MenuHorizontalScrollView(Context context, AttributeSet attrs,
                                    int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        initView(context);
    }

    private void initView(Context context) {
        // TODO Auto-generated method stub
        screenWidth = context.getResources().getDisplayMetrics().widthPixels;
        menuViewWidth = (int) (screenWidth * menuScale);
    }

    /**
     * 因为我们的menu是固定大小的 是吧 所以我们要给他设置下
     * 再测量之前设置下layoutParams是可以直接起作用的
     * 因为在测量的时候来拿出layoutParams
     * 相信玩过自定义view都都看到过 是吧
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // TODO Auto-generated method stub

        ViewGroup rlChildview = (ViewGroup) getChildAt(0);
        rlChildview.getLayoutParams().width = screenWidth + menuViewWidth;
        contentChild = (ViewGroup) rlChildview
                .findViewById(R.id.main_content_id);
        contentChild.getLayoutParams().width = screenWidth;

        menuChild = (ViewGroup) rlChildview.findViewById(R.id.main_menu_id);
        menuChild.getLayoutParams().width = menuViewWidth;

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        contentChild.setPivotX(screenWidth);
        contentChild.setPivotY(contentChild.getMeasuredHeight() / 2);

        iconViewWidth = iconView.getMeasuredWidth();

    }

    /*这个方法就是在xmlParse后调用的 可以找到我们的一些控件*/
    @Override
    protected void onFinishInflate() {
        // TODO Auto-generated method stub
        super.onFinishInflate();

        iconView = findViewById(R.id.main_menu_icon_id);
    }

    /* 解决垂直和水平滑动的问题*/
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        int action = ev.getAction() & MotionEventCompat.ACTION_MASK;

        switch (action) {
            case MotionEvent.ACTION_DOWN:
                int index = MotionEventCompat.getActionIndex(ev);
                mActivePointerId = MotionEventCompat.getPointerId(ev, index);
                if (mActivePointerId == INVALID_POINTER) {
                    break;
                }
                mInitialMotionX = MotionEventCompat.getX(ev, index);
                mInitialMotionY = MotionEventCompat.getY(ev, index);

                break;
            case MotionEvent.ACTION_MOVE:
                int lastIndex = MotionEventCompat.findPointerIndex(ev,
                        mActivePointerId);
                final float lastX = MotionEventCompat.getX(ev, lastIndex);
                final float lastY = MotionEventCompat.getY(ev, lastIndex);
                final float destX = Math.abs(lastX - mInitialMotionX);
                final float destY = Math.abs(lastY - mInitialMotionY);
                if (destX > destY) {
                    if (!isOpen && lastX - mInitialMotionX > 0) {
                        return false;
                    }
                    /*这里一定不能直接返回true  因为在父类要做一些判断和初始化变量不然没有效果了*/
                    return super.onInterceptTouchEvent(ev);
                } else {
                    return false;
                }
            case MotionEvent.ACTION_UP:
                break;
        }

        return super.onInterceptTouchEvent(ev);
    }

    /**
     * 因为本身就是horizontalScrollview 就代用滚动
     * 所以我们只需要判断一下actionup 是否要打开还是关闭menu
     * @param ev
     * @return
     */


    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        if (ev.getAction() == MotionEvent.ACTION_UP) {
            if (getScrollX() > menuViewWidth / 2) {
                this.smoothScrollTo(menuViewWidth, 0);
                isOpen = true;
            } else {
                this.smoothScrollTo(0, 0);
                isOpen = false;
            }
            return true;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 这里呢就是做一些动画了
     */

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        // TODO Auto-generated method stub
        super.onScrollChanged(l, t, oldl, oldt);

        float scale = l * 1.0f / menuViewWidth;

        float menuScale = 0.8f + 0.2f * scale;

        float contentScale = 1.0f - 0.2f * scale;

        /* menu change */
        PropertyValuesHolder menuScaleX = PropertyValuesHolder.ofFloat(
                "scaleX", menuScale);
        PropertyValuesHolder menuScaleY = PropertyValuesHolder.ofFloat(
                "scaleY", menuScale);
        PropertyValuesHolder menuTranslateY = PropertyValuesHolder.ofFloat(
                "translationX", -(1 - scale) * menuViewWidth * 0.2f);

        ObjectAnimator menuOA = ObjectAnimator.ofPropertyValuesHolder(
                menuChild, menuScaleX, menuScaleY, menuTranslateY);
        menuOA.setDuration(0);
        menuOA.start();

        /* content change */

        PropertyValuesHolder contentScaleX = PropertyValuesHolder.ofFloat(
                "scaleX", contentScale);
        PropertyValuesHolder contentScaleY = PropertyValuesHolder.ofFloat(
                "scaleY", contentScale);
        ObjectAnimator contentOA = ObjectAnimator.ofPropertyValuesHolder(
                contentChild, contentScaleX, contentScaleY);
        contentOA.setDuration(0);
        contentOA.start();
        /* menu icon change */
        ObjectAnimator iconOA = ObjectAnimator.ofFloat(iconView,
                "translationX", -scale * iconViewWidth * 0.5f);
        iconOA.setDuration(0);
        iconOA.start();
    }

    /*暂时给哪儿耳朵View使用，控制菜单的显示和隐藏*/
    public void toggleMenu() {
        if (isOpen) {
            this.smoothScrollTo(0, 0);
        } else {
            this.smoothScrollTo(menuViewWidth, 0);
        }
        isOpen = !isOpen;
    }


}

是不是很简单啊。就那么几十行代码。侧滑已经很多了。相信大家很容易明白。
不然拦截没有效果，大家可以去看下HorizontalScrollView的源码。
至于onScrollChanged方法里面的动画变化处理，
因为是模仿不是正规的开发，所以就直接使用了属性动画，
要是要兼容的话可以使用开源库nineoldandroids.
来看下效果：

这里写图片描述

是不是比较坑，完全不是我们想要的啊。该上的没上，该下的没下（到底是谁上谁下呢，，，，，我去 跑腿了。。。）
我们来分析下原因。返回到上面我们的布局文件，你会发现什么，用火眼看下，是不是不坑，是我们的代码写的坑是吧。前人挖坑后人填坑，前人种树后人乘凉，我们希望我们新进的公司的前辈都是种树的不是挖坑的，我们好乘凉喝茶看妹子，打豆豆啊，不然天天填坑，就不能愉快的下班找妹子约会了。。。嗨嗨。。中风了
所以我们要自定义RelativeLayout 是吧，前面已经说了。好开始我们的改造view

public MenuRelativeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        setChildrenDrawingOrderEnabled(true);
    }

    @Override
    protected int getChildDrawingOrder(int childCount, int i) {
        // TODO Auto-generated method stub

        return childCount - i - 1;
    }

就两句代码句搞定了，改变下view的绘制顺序，好吧，这样我们的侧滑就完成了，哎。。。这天气是中暑的节奏。。先去喝杯水。

接下来呢是重头戏，上面的都是铺贴，房基是吧。
那么开始我们的内容区域吧。。。。
我们先来分析下哈

这里写图片描述

他不是两个activity而是在一个activity的一个容器里，是吧，
不然，下面的那个播放音乐的就不好搞了。
我们来思考下，这个怎么做好呢。。。
1.用一个FrameLayout作为容器，然后不断的添加view？
看来是个不错的选择，那么我们就先FrameLayout试试。
还是使用LayoutTransition呢？
3.滑动返回又怎么处理呢？直接自定义？还是v4包里的viewDragHelp？
进过试验和考虑我选择了使用FrameLayout作为容器
动画这一块使用预备容器的做法，因为“在addview是添加时自己加动画？
还是使用LayoutTransition呢”都不理想，在低端机下回闪一下体验不好。
滑动使用viewdraghelp可以减少很多代码量啊。
使用view作为activity一样的用，那么我们必须封装一下啊是吧，
不然每次都一大堆重复代码，还能不能愉快的下班了。

定义一个接口，

public interface IViewPager {
    View attachView(MenuContentFrameLayout rootView);

}

再来一个基类

public abstract class BaseViewPager implements IViewPager {

    protected View contentView;
    protected Context mContext;
    protected MenuContentFrameLayout rootView;

    public BaseViewPager(Context mContext, MenuContentFrameLayout rootView) {
        // TODO Auto-generated constructor stub
        this.mContext = mContext;
        contentView = attachView(rootView);
        this.rootView = rootView;

        initView();
        initValue();
        setListener();
    }

    protected abstract void initView();

    protected abstract void initValue();

    protected abstract void setListener();

}

那首页view代码来分析下

public class MainPager extends BaseViewPager {

    private Button goBtn;

    public MainPager(Context context, MenuContentFrameLayout rootView) {
        super(context, rootView);
        // TODO Auto-generated constructor stub
    }

    @Override
    public View attachView(MenuContentFrameLayout rootView) {
        // TODO Auto-generated method stub
        return LayoutInflater.from(mContext).inflate(
                R.layout.main_content_layout, rootView, true);
    }

    @Override
    protected void initView() {
        // TODO Auto-generated method stub
        goBtn = (Button) contentView.findViewById(R.id.btn_go);
    }

    @Override
    protected void initValue() {
        // TODO Auto-generated method stub

    }

    @Override
    protected void setListener() {
        // TODO Auto-generated method stub

        goBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                new FriendListPager(mContext, rootView);
            }
        });

    }

}这里写代码片

public class MainActivity extends Activity {
    private MenuHorizontalScrollView menuHroizontalScrollView;
    private ImageView menuIconView;
    private MenuContentFrameLayout contentFl;

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

        initView();
        initValue();
        initListener();

    }

    private void initView() {
        // TODO Auto-generated method stub
        menuHroizontalScrollView = (MenuHorizontalScrollView) findViewById(R.id.menu_horizontal);
        menuIconView = (ImageView) findViewById(R.id.main_menu_icon_id);
        contentFl = (MenuContentFrameLayout) findViewById(R.id.content_fl);

    }

    private void initValue() {
        // TODO Auto-generated method stub
        new MainPager(this, contentFl);

    }

    private void initListener() {
        // TODO Auto-generated method stub
        menuIconView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                menuHroizontalScrollView.toggleMenu();
            }
        });
    }
}

看到没有我们的mainactivity使用new MainPager(this, contentFl);
就可以把mainViewpager添加到容器中了，
有点犯困，这里写的有点乱。最后附上所有代码，估计看大代码就情绪了，

最后上我们最核心的类

public class MenuContentFrameLayout extends FrameLayout {
    /*重点滑动view*/
    private ViewDragHelper mDragHelper;

    private static final int MIN_FLING_VELOCITY = 400;

    private int mActivePointerId;
    private final int INVALID_POINTER = -1;
    private float mInitialMotionX;
    private float mInitialMotionY;

    private DisplayMetrics displayMetrics;

    /*保存添加的view*/
    private ArrayList<View> stackViewList;

    /*回收的view*/
    private ArrayList<View> recycleViewList;

    /*做动画的辅助view*/
    private ContentSubFrameLayout subContentLayout;

    public MenuContentFrameLayout(Context context) {
        this(context, null);
        // TODO Auto-generated constructor stub
    }

    public MenuContentFrameLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        // TODO Auto-generated constructor stub
    }

    public MenuContentFrameLayout(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub

        initView(context);
    }

    private void initView(Context context) {
        // TODO Auto-generated method stub
        mDragHelper = ViewDragHelper.create(this, 1.0f, new MyCallback());
        displayMetrics = context.getResources().getDisplayMetrics();
        final float minVel = MIN_FLING_VELOCITY * displayMetrics.density + 0.5f;
        mDragHelper.setMinVelocity(minVel);

        stackViewList = new ArrayList<View>();
        recycleViewList = new ArrayList<View>();

    }

    /**
     * 这里处理滑动返回和滑动冲突处理
     * @param ev
     * @return
     */

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub

        int action = ev.getAction() & MotionEventCompat.ACTION_MASK;

        switch (action) {
        case MotionEvent.ACTION_DOWN:
            int index = MotionEventCompat.getActionIndex(ev);
            mActivePointerId = MotionEventCompat.getPointerId(ev, index);
            if (mActivePointerId == INVALID_POINTER) {
                break;
            }
            mInitialMotionX = MotionEventCompat.getX(ev, index);
            mInitialMotionY = MotionEventCompat.getY(ev, index);

            break;
        case MotionEvent.ACTION_MOVE:
            int lastIndex = MotionEventCompat.findPointerIndex(ev,
                    mActivePointerId);
            final float lastX = MotionEventCompat.getX(ev, lastIndex);
            final float lastY = MotionEventCompat.getY(ev, lastIndex);
            final float destX = Math.abs(lastX - mInitialMotionX);
            final float destY = Math.abs(lastY - mInitialMotionY);
            if (destX > destY) {
                return mDragHelper.shouldInterceptTouchEvent(ev);
            } else {
                return false;
            }
        case MotionEvent.ACTION_UP:
            break;
        }

        return mDragHelper.shouldInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        mDragHelper.processTouchEvent(event);
        return true;
    }

    @Override
    public void computeScroll() {
        // TODO Auto-generated method stub
        if (mDragHelper.continueSettling(true)) {
            invalidate();
        }
    }

    /**
     * v4包里的滑动回调
     */
    private class MyCallback extends ViewDragHelper.Callback {

        /*是否要捕获*/
        @Override
        public boolean tryCaptureView(View arg0, int arg1) {
            // TODO Auto-generated method stub
            return true;
        }

        /*水平滑动距离*/
        @Override
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            // TODO Auto-generated method stub
            if (getChildCount() == 1)
                left -= dx * 2 / 3;
            if (left < 0)
                left = 0;
            return left;
        }

        /*当手机松开时*/
        @Override
        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            // TODO Auto-generated method stub

            if (getChildCount() == 1) {
                mDragHelper.settleCapturedViewAt(0, releasedChild.getTop());
            } else {
                final float offset = releasedChild.getLeft() * 1.0f
                        / releasedChild.getWidth();

                mDragHelper.settleCapturedViewAt(xvel > 0 || xvel == 0
                        && offset >= 0.5 ? releasedChild.getWidth() : 0,
                        releasedChild.getTop());
            }
            invalidate();
        }

        /*位置变化时，这里可以做动画*/
        @Override
        public void onViewPositionChanged(View changedView, int left, int top,
                int dx, int dy) {
            // TODO Auto-generated method stub
            if (getChildCount() > 1) {


                if (left >= changedView.getWidth()) {
                    removeView(changedView);
                    stackViewList.remove(stackViewList.size() - 1);

                    if (recycleViewList.size() > 0) {
                        addView(recycleViewList.get(recycleViewList.size() - 1),
                                0);
                        recycleViewList.remove(recycleViewList.size() - 1);

                    }
                }
            }
        }

        @Override
        public int getViewHorizontalDragRange(View child) {
            // TODO Auto-generated method stub
            return child.getWidth();
        }

    }

    @Override
    public void addView(View child, android.view.ViewGroup.LayoutParams params) {
        // TODO Auto-generated method stub
        if (child instanceof ContentSubFrameLayout) {
            super.addView(child, params);
        } else {

            if (stackViewList.size() == 0) {
                super.addView(child, params);
            } else {

                if (stackViewList.size() >= 2) {
                    View oneChildView = getChildAt(0);
                    recycleViewList.add(oneChildView);
                    removeView(oneChildView);
                }

                /*添加一个辅助容器来作出现动画，避免闪一下问题*/
                final ContentSubFrameLayout subContentLayout = new ContentSubFrameLayout(
                        getContext());
                final FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(
                        FrameLayout.LayoutParams.MATCH_PARENT,
                        FrameLayout.LayoutParams.MATCH_PARENT);
                layoutParams.setMargins(displayMetrics.widthPixels, 0, 0, 0);
                addView(subContentLayout, layoutParams);

                subContentLayout.addView(child, params);

                /*处理动画*/
                ObjectAnimator subOA = ObjectAnimator.ofInt(subContentLayout,
                        "left", displayMetrics.widthPixels, 0);
                subOA.setDuration(600);
                subOA.start();

                subOA.addListener(new AnimatorListenerAdapter() {

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        // TODO Auto-generated method stub
                        final FrameLayout.LayoutParams layoutParams = (LayoutParams) subContentLayout
                                .getLayoutParams();
                        layoutParams.leftMargin = 0;
                    }
                });
            }
            stackViewList.add(child);
        }
    }

}

代码里都有注释，最主要的是出现动画哪里，都加了一个辅助容器，
不然会出现闪一下的问题，自己可以试验下。

还加了一个缓存view，就是当view添加到多余三个时要把底部的view从容器移除，
不然侧滑菜单是会很卡顿，因为都看不到了，侧滑时还一直draw，也没有意思了，
是吧，所以就移除把，当要的时候再添加上去。界面的话没有去抠图，
程序员要的是核心代码和思想不是几个图片，是吧。
好了今天就到这里了。。。。困到不行啊，，眯会去。。。

哪里上传代码啊。。。晕

第一次写博客，哎，，第一次真是痛啊。后续持续更新，今天就先到这了

源代码