Android 自定义view实现上下滑动，大众点评，美团地图导航界面。

主函数：

package com.example.slideview;

import com.example.fdadsf.R;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.app.Activity;

/**
 * 滑动菜单Demo主Activity
 *
 * @author guolin
 */
public class MainActivity extends Activity {

    /**
     * 双向滑动菜单布局
     */
    private UpAndDownSlidinglayout updownSldingLayout;

    /**
     * 在内容布局上显示的ListView
     */
    private ListView contentList;
    private LinearLayout ll;
    /**
     * ListView的适配器
     */
    private ArrayAdapter<String> contentListAdapter;

    /**
     * 用于填充contentListAdapter的数据源。
     */
    private String[] contentItems = { "Content Item 1", "Content Item 2",
            "Content Item 3", "Content Item 4", "Content Item 5",
            "Content Item 6", "Content Item 7", "Content Item 8",
            "Content Item 9", "Content Item 10", "Content Item 11",
            "Content Item 12", "Content Item 13", "Content Item 14",
            "Content Item 15", "Content Item 16" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ll = (LinearLayout) findViewById(R.id.content);
        updownSldingLayout = (UpAndDownSlidinglayout) findViewById(R.id.updown_sliding_layout);
        contentList = (ListView) findViewById(R.id.contentList);
        contentListAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, contentItems);
        contentList.setAdapter(contentListAdapter);
        updownSldingLayout.setScrollEvent(ll);
    }

}

自定义上下滑动view：

package com.example.slideview;

import android.content.Context;
import android.os.AsyncTask;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.WindowManager;
import android.view.View.OnTouchListener;
import android.widget.RelativeLayout;

public class UpAndDownSlidinglayout extends RelativeLayout implements
        OnTouchListener {
    /**
     * 滚动显示和隐藏上侧布局时，手指滑动需要达到的速度。
     */
    public static final int SNAP_VELOCITY = 200;

    /**
     * 滑动状态的一种，表示未进行任何滑动。
     */
    public static final int DO_NOTHING = 0;
    /**
     * 滑动状态的一种，表示正在滑出底部界面。
     */
    public static final int SHOW_UP_MENU = 1;

    /**
     * 滑动状态的一种，表示正在隐藏底部界面。
     */
    public static final int HIDE_UP_MENU = 3;
    /**
     * 滑动状态的一种，表示底部界面显示的情况下，继续向下滑动。
     */
    public static final int SHOW_UP_MENU2 = 4;

    /**
     * 记录当前的滑动状态
     */
    private int slideState;

    /**
     * 屏幕宽度值。
     */
    private int screenWidth;
    private int screenHeight;

    /**
     * 在被判定为滚动之前用户手指可以移动的最大值。
     */
    private int touchSlop;

    /**
     * 记录手指按下时的横坐标。
     */
    private float xDown;

    /**
     * 记录手指按下时的纵坐标。
     */
    private float yDown;

    /**
     * 记录手指移动时的横坐标。
     */
    private float xMove;

    /**
     * 记录手指移动时的纵坐标。
     */
    private float yMove;

    /**
     * 记录手机抬起时的纵坐标。
     */
    private float yUp;
    /**
     * 底部界面当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
     */
    private boolean isUpMenuVisible;

    /**
     * 下侧菜单当前是显示还是隐藏。只有完全显示或隐藏时才会更改此值，滑动过程中此值无效。
     */
    private boolean isDownMenuVisible;

    /**
     * 是否正在滑动。
     */
    private boolean isSliding;

    /**
     * 底部界面布局对象。
     */
    private View upMenuLayout;

    /**
     * 内容布局对象。
     */
    private View contentLayout;

    /**
     * 用于监听滑动事件的View。
     */
    private View mBindView;

    /**
     * 底部界面布局的参数。
     */
    private MarginLayoutParams upMenuLayoutParams;

    /**
     * 内容布局的参数。
     */
    private RelativeLayout.LayoutParams contentLayoutParams;

    /**
     * 用于计算手指滑动的速度。
     */
    private VelocityTracker mVelocityTracker;

    public UpAndDownSlidinglayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        screenWidth = wm.getDefaultDisplay().getWidth();
        screenHeight = wm.getDefaultDisplay().getHeight();
        touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
    }

    /**
     * 绑定监听滑动事件的View。
     *
     * @param bindView
     *            需要绑定的View对象。
     */
    public void setScrollEvent(View bindView) {
        mBindView = bindView;
        mBindView.setOnTouchListener(this);
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub
        createVelocityTracker(event);
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            // 手指按下时，记录按下时的坐标
            xDown = event.getRawX();
            yDown = event.getRawY();
            // 将滑动状态初始化为DO_NOTHING
            slideState = DO_NOTHING;
            break;
        case MotionEvent.ACTION_MOVE:
            xMove = event.getRawX();
            yMove = event.getRawY();
            int moveDistanceX = (int) (xMove - xDown);
            int moveDistanceY = (int) (yMove - yDown);
            // 检查当前的滑动状态
            checkSlideState(moveDistanceX, moveDistanceY);
            switch (slideState) {
            case SHOW_UP_MENU:
                contentLayoutParams.topMargin = moveDistanceY;
                contentLayout.setLayoutParams(contentLayoutParams);
                break;
            case SHOW_UP_MENU2:
            case HIDE_UP_MENU:
                contentLayoutParams.topMargin = screenHeight / 2
                        + moveDistanceY;
                contentLayout.setLayoutParams(contentLayoutParams);
                break;
            default:
                break;
            }
            break;
        case MotionEvent.ACTION_UP:
            yUp = event.getRawY();
            int upDistanceY = (int) (yUp - yDown);
            if (isSliding) {
                // 手指抬起时，进行判断当前手势的意图
                switch (slideState) {
                case SHOW_UP_MENU:
                case SHOW_UP_MENU2:
                    if (shouldScrollToUpMenu()) {
                        scrollToUpMenu();
                    } else {
                        scrollToContentFromUpMenu();
                    }
                    break;
                case HIDE_UP_MENU:
                    if (shouldScrollToContentFromUpMenu()) {
                        scrollToContentFromUpMenu();
                    } else {
                        scrollToUpMenu();
                    }
                    break;
                default:
                    break;
                }
            } else if (upDistanceY < touchSlop && isUpMenuVisible) {
                // 当底部界面显示时，如果用户点击一下内容部分，则直接滚动到内容界面
                scrollToContentFromUpMenu();
            }else if (upDistanceY < touchSlop && !isUpMenuVisible) {
                //当上册菜单隐藏时，如果用户点击一下内容部分，则直接显示底部界面
                scrollToUpMenu();
            }
            recycleVelocityTracker();
            break;
        }
        return true;
    }

    /**
     * 创建VelocityTracker对象，并将触摸事件加入到VelocityTracker当中。
     *
     * @param event
     *
     */
    private void createVelocityTracker(MotionEvent event) {
        if (mVelocityTracker == null) {
            mVelocityTracker = VelocityTracker.obtain();
        }
        mVelocityTracker.addMovement(event);
    }

    /**
     * 根据手指移动的距离，判断当前用户的滑动意图，然后给slideState赋值成相应的滑动状态值。
     *
     * @param moveDistanceX
     *            横向移动的距离
     * @param moveDistanceY
     *            纵向移动的距离
     */
    private void checkSlideState(int moveDistanceX, int moveDistanceY) {
        if (isUpMenuVisible) {
            if (!isSliding && Math.abs(moveDistanceY) >= touchSlop
                    && moveDistanceY < 0) {
                isSliding = true;
                slideState = HIDE_UP_MENU;
            } else if (!isSliding && Math.abs(moveDistanceY) >= touchSlop
                    && moveDistanceY > 0) {
                isSliding = true;
                slideState = SHOW_UP_MENU2;
            }
        } else {
            if (!isSliding && Math.abs(moveDistanceY) >= touchSlop
                    && moveDistanceY > 0 && Math.abs(moveDistanceX) < touchSlop) {
                isSliding = true;
                slideState = SHOW_UP_MENU;
                contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP, 0);
                contentLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
                contentLayout.setLayoutParams(contentLayoutParams);
            }
        }
    }

    /**
     * 判断是否应该滚动将底部界面展示出来。如果手指移动距离大于屏幕宽度的1/4，或者手指移动速度大于SNAP_VELOCITY，
     * 就认为应该滚动将底部界面展示出来。
     *
     * @return 如果应该将底部界面展示出来返回true，否则返回false。
     */
    private boolean shouldScrollToUpMenu() {
        return yUp - yDown > upMenuLayoutParams.height / 4
                || getScrollVelocity() > SNAP_VELOCITY;
    }

    /**
     * 判断是否应该从底部界面滚动到内容布局，如果手指移动距离大于屏幕宽度的1/4，或者手指移动速度大于SNAP_VELOCITY，
     * 就认为应该从底部界面滚动到内容布局。
     *
     * @return 如果应该从底部界面滚动到内容布局返回true，否则返回false。
     */
    private boolean shouldScrollToContentFromUpMenu() {
        return yDown - yUp > upMenuLayoutParams.height / 4
                || getScrollVelocity() > SNAP_VELOCITY;
    }

    /**
     * 获取手指在绑定布局上的滑动速度。
     *
     * @return 滑动速度，以每秒钟移动了多少像素值为单位。
     */
    private int getScrollVelocity() {
        mVelocityTracker.computeCurrentVelocity(1000);
        int velocity = (int) mVelocityTracker.getXVelocity();
        return Math.abs(velocity);
    }

    class UpMenuScrollTask extends AsyncTask<Integer, Integer, Integer> {

        @Override
        protected Integer doInBackground(Integer... speed) {
            int topMargin = contentLayoutParams.topMargin;
            // 根据传入的速度来滚动界面，当滚动到达边界值时，跳出循环。
            while (true) {
                topMargin = topMargin - speed[0];
                if (topMargin > screenHeight / 2) {
                    topMargin = screenHeight / 2;
                    break;
                }
                if (topMargin < 0) {
                    topMargin = 0;
                    break;
                }
                publishProgress(topMargin);
                // 为了要有滚动效果产生，每次循环使线程睡眠一段时间，这样肉眼才能够看到滚动动画。
                sleep(20);
            }
            if (speed[0] > 0) {
                isUpMenuVisible = false;
            } else {
                isUpMenuVisible = true;
            }
            isSliding = false;
            return topMargin;
        }

        @Override
        protected void onProgressUpdate(Integer... topMargin) {
            contentLayoutParams.topMargin = topMargin[0];
            contentLayout.setLayoutParams(contentLayoutParams);
            unFocusBindView();
        }

        @Override
        protected void onPostExecute(Integer topMargin) {
            contentLayoutParams.topMargin = topMargin;
            contentLayout.setLayoutParams(contentLayoutParams);
        }
    }

    /**
     * 使当前线程睡眠指定的毫秒数。
     *
     * @param millis
     *            指定当前线程睡眠多久，以毫秒为单位
     */
    private void sleep(long millis) {
        try {
            Thread.sleep(millis);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

    /**
     * 使用可以获得焦点的控件在滑动的时候失去焦点。
     */
    private void unFocusBindView() {
        if (mBindView != null) {
            mBindView.setPressed(false);
            mBindView.setFocusable(false);
            mBindView.setFocusableInTouchMode(false);
        }
    }

    /**
     * 将界面滚动到底部界面界面，滚动速度设定为-30.
     */
    public void scrollToUpMenu() {
        new UpMenuScrollTask().execute(-30);
    }

    /**
     * 将界面从底部界面滚动到内容界面，滚动速度设定为30.
     */
    public void scrollToContentFromUpMenu() {
        new UpMenuScrollTask().execute(30);
    }

    /**
     * 在onLayout中重新设定底部界面、下侧菜单、以及内容布局的参数。
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (changed) {
            // 获取底部界面布局对象
            upMenuLayout = getChildAt(0);
            upMenuLayoutParams = (MarginLayoutParams) upMenuLayout
                    .getLayoutParams();
            // 获取内容布局对象
            contentLayout = getChildAt(1);
            contentLayoutParams = (RelativeLayout.LayoutParams) contentLayout
                    .getLayoutParams();
            contentLayoutParams.height = screenHeight;
            contentLayout.setLayoutParams(contentLayoutParams);
        }
    }

    /**
     * 回收VelocityTracker对象。
     */
    private void recycleVelocityTracker() {
        mVelocityTracker.recycle();
        mVelocityTracker = null;
    }
}

XML文件：

<com.example.slideview.UpAndDownSlidinglayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/updown_sliding_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <RelativeLayout
        android:id="@+id/up_menu"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:background="#00ccff"
         >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="This is up menu"
            android:textColor="#000000"
            android:textSize="28sp" />
    </RelativeLayout>
    <LinearLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:paddingTop="50dp"
        android:gravity="center"
        android:background="#00ff00" >

        <ListView
            android:id="@+id/contentList"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:background="#e9e9e9"
            android:cacheColorHint="#00000000"
            android:scrollbars="none" >

        </ListView>
    </LinearLayout>

</com.example.slideview.UpAndDownSlidinglayout>

时间： 2024-10-22 18:32:15

Android 自定义view实现上下滑动，大众点评，美团地图导航界面。的相关文章

android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索

我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的Android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析整体上来说,左边是一个ListView,右边是一个自定义View,但是左边的ListView和我们平常使用的ListView还有一点点不同,就是在ListView中我对所有的联系人进行了分组,那么这种效果的实现最常见的就是两种思路: 1.使用ExpandableListView来实现这种分组效果 2.使

Android自定义View（CustomCalendar－定制日历控件）

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeasure 4onDraw 绘制月份绘制星期绘制日期及任务 5事件处理源码下载 ??应项目需求,需要做一个日历控件,效果图如下: ???? ??接到需求后,没有立即查找是否有相关开源日历控件可用.系统日历控件是否能满足 ,第一反应就是这个控件该怎么画?谁叫咱自定义控件技术牛逼呢O(∩_∩)O哈哈~

Android自定义View之仿QQ侧滑菜单实现

最近,由于正在做的一个应用中要用到侧滑菜单,所以通过查资料看视频,学习了一下自定义View,实现一个类似于QQ的侧滑菜单,顺便还将其封装为自定义组件,可以实现类似QQ的侧滑菜单和抽屉式侧滑菜单两种菜单. 下面先放上效果图: 我们这里的侧滑菜单主要是利用HorizontalScrollView来实现的,基本的思路是,一个布局中左边是菜单布局,右边是内容布局,默认情况下,菜单布局隐藏,内容布局显示,当我们向右侧滑,就会将菜单拉出来,而将内容布局的一部分隐藏,如下图所示: 下面我们就一步步开始实现一个

android自定义View之NotePad出鞘记

现在我们的手机上基本都会有一个记事本,用起来倒也还算方便,记事本这种东东,如果我想要自己实现,该怎么做呢?今天我们就通过自定义View的方式来自定义一个记事本.OK,废话不多说,先来看看效果图. 整个页面还是很简单的. 1.自定义View的分类 OK,那么在正文开始之前,我想先来说说自定义View的分类,自定义View我们一共分为三类 1.自绘控件自绘控件就是我们自定义View继承自已有控件,然后扩展其功能,之前两篇自定义View的博客(android自定义View之钟表诞生记,android

Android 自定义View合集

自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/Mr-XiaoLiang 自定义控件三部曲 http://blog.csdn.net/harvic880925?viewmode=contents Android 从0开始自定义控件之View基础知识与概念 http://blog.csdn.net/airsaid/article/details/5

Android自定义View（RollWeekView－炫酷的星期日期选择控件）

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义CustomWeekView 4重写onMeasure 5点击后执行动画 7重置预备控件源码下载 ??最近收到一个自定义控件的需求,需要做一个日期选择控件,实现图如下: ???? ??一次展示一个星期的5天,中间放大的为当前选中的:如果点击了其中一个日期,比如星期五,那么整体向左滑动,并将星期五慢慢放大

Android 自定义View——自定义点击事件

每个人手机上都有通讯录,这是毫无疑问的,我们通讯录上有一个控件,在通讯录的最左边有一列从"#"到"Z"的字母,我们通过滑动或点击指定的字母来确定联系人的位置,进而找到联系人.我们这一节就通过开发这个控件,来学如何自定义控件的点击事件. 通讯录列表查找控件界面绘制首先我们需要先将控件的基本布局绘制出来,这里我们不在做详细的解释,在<Android 自定义View--自定义View控件 >博客中,我们已经详细讲解了如何绘制自定义控件的布局.通讯录列表查找控

【朝花夕拾】Android自定义View篇之（八）多点触控（上）基础知识

前言转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/11155259.html],谢谢! 在前面的文章中,介绍了不少触摸相关的知识,但都是基于单点触控的,即一次只用一根手指.但是在实际使用App中,常常是多根手指同时操作,这就需要用到多点触控相关的知识了.多点触控是在Android2.0开始引入的,在现在使用的Android手机上都是支持多点触控的.本系列文章将对常见的多点触控相关的重点知识进行总结,并使用多点触控来实现一些常见的效果,从而达到将

Android 自定义 View 详解

View 的绘制系列文章: Android View 绘制流程之 DecorView 与 ViewRootImpl Android View 的绘制流程之 Measure 过程详解 (一) Android View 的绘制流程之 Layout 和 Draw 过程详解 (二) Android View 的事件分发原理解析对于 Android 开发者来说,原生控件往往无法满足要求,需要开发者自定义一些控件,因此,需要去了解自定义 view 的实现原理.这样即使碰到需要自定义控件的时候,也可以游刃有