仿今日头条下拉出现SearchBar,再下拉刷新效果，SearchListView实现以及原理讲解

先看效果

分别是我的效果和今日头条的效果：

以上效果包括：

1.如果下拉的高度超过search view的高度的3/4，但是小于head view高度，则松开手时search view自动出现

2.如果下拉的高度小于search view的高度的1/4，则松开手时search view自动回弹消失

3.如果下拉的高度超过head view的总高度，则松手进行刷新

4.刷新完成自动隐藏search view

实现原理讲解

参考了 github开源项目：[https://github.com/vivian8725118/SearchListView ]

提示： 这个效果是基于PullToRefreshListView实现的，如果对下拉刷新listview实现不明白的，可以先看这篇博客[http://blog.csdn.net/u010335298/article/details/51098755]

原理讲解

如图，将搜索部分的view放进ListView的头view中，在触摸事件中处理search view 的显示和隐藏。

1.我给listview定义了五种状态

    public static final int STATE_NONE  = 0;
    public static final int STATE_PULL_TO_SHOW_SEARCH_VIEW  = 1; // 下拉去展示search_view
    public static final int STATE_PULL_TO_REFRESH = 2; //下拉去刷新
    public static final int STATE_RELEASE_TO_REFRESH = 3; // 释放进行刷新
    public static final int STATE_REFRESHING = 4; // 正在刷新

稍微讲解以下这几种状态：

STATE_PULL_TO_SHOW_SEARCH_VIEW 指的是search view出现了一部分但是没有完全出现的时候

STATE_PULL_TO_REFRESH 指的是search view完全出现，但是head view没有完全出现的时候

STATE_RELEASE_TO_REFRESH 指的是head view完全出现的时候

2.添加search view

 private void initHeaderView() {
        headerView =  View.inflate(getContext(), R.layout.search_header_listview, null);
        searchContainer = (RelativeLayout) headerView.findViewById(R.id.search_container);
        headerTv = (TextView) headerView.findViewById(R.id.tvHead);
        headerView.measure(0, 0); // 系统会帮我们测量出headerView的高度
        headerHeight = refreshHeight = headerView.getMeasuredHeight();
        Log.d("zyr", "--------------------headerHeight :" + headerHeight);
        headerView.setPadding(0, -headerHeight, 0, 0);
        invalidate();
        Log.d("zyr", "----------------------headerPaddingTop :" + headerView.getPaddingTop());
        super.addHeaderView(headerView, null, false);
    }

    private void addSearchView() {
        searchView = LayoutInflater.from(getContext()).inflate(R.layout.search_view, null);
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        searchContainer.addView(searchView , layoutParams);
        searchContainer.measure(0, 0);
        searchContainerHeight = searchContainer.getMeasuredHeight();
        Log.d("zyr", "--------------------searchContainerHeight :" + searchContainerHeight);
        headerHeight = searchContainerHeight + headerHeight ;
        headerView.setPadding(0, - headerHeight, 0, 0);
        invalidate();
        Log.d("zyr", "--------------------headerHeight :" + headerHeight);
        Log.d("zyr", "----------------------headerPaddingTop :" + headerView.getPaddingTop());
    }

3.触摸事件的处理：我详细的写了注释

/***************************    Touch***************************************/
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN :
                downY = lastMoveY = (int) ev.getY();
                downX = (int) ev.getX();
                break;
            case MotionEvent.ACTION_MOVE :
                moveY = (int) ev.getY();
                moveDiff = (moveY - lastMoveY)/2 ;
                lastMoveY = moveY ;
                diff = moveY - downY;
                //计算移动后的paddingTop
                int paddingTop =   headerView.getPaddingTop() + moveDiff ;
                // 如果: 第一个可见
                if(getFirstVisiblePosition() == 0 && Math.abs(diff) > 50){
                    switch (state){
                        case STATE_NONE :
                        //当状态是none的时候，向下拉才做处理
                            if(diff > 0){
                                state = STATE_PULL_TO_SHOW_SEARCH_VIEW;
                                headerView.setPadding(0, paddingTop, 0, 0);
                                Log.d("zyr", "--------------paddingTop:" + paddingTop);
                                return true;
                            }
                            break;
                        case STATE_PULL_TO_SHOW_SEARCH_VIEW:
                        case STATE_PULL_TO_REFRESH:
                        case STATE_RELEASE_TO_REFRESH:
                            if (paddingTop >= 0 ) { // 完全显示了.
                                Log.i("zyr", "ACTION_MOVE 松开刷新");
                                state = STATE_RELEASE_TO_REFRESH;
                                refreshHeaderView();
                            } else if (paddingTop < 0 && Math.abs(paddingTop) <= refreshHeight) {//search view完全显示了，head view没有完全显示
                                Log.i("zyr", "ACTION_MOVE 下拉刷新");
                                state = STATE_PULL_TO_REFRESH;
                                refreshHeaderView();
                            }  else if(paddingTop < 0 && Math.abs(paddingTop) > refreshHeight) {//search view没有完全显示
                                Log.i("zyr", "ACTION_MOVE 下拉显示Search View");
                                state = STATE_PULL_TO_SHOW_SEARCH_VIEW;
                                refreshHeaderView();
                            }  else if ( paddingTop == 0){
                                state = STATE_NONE;
                                break;
                            }
                            // 下拉头布局
                            Log.d("zyr","--------------paddingTop:" + paddingTop);
                            headerView.setPadding(0, paddingTop, 0, 0);
                            return true;
                        default:
                            break;
                    }
                }
                break;
            case MotionEvent.ACTION_UP :
                upY = (int)ev.getY();
                upX = (int)ev.getX();
                // 判读是不是点击事件
                if(Math.abs(upY - downY) < 50 && Math.abs(upX - downX) < 50){
                    super.onTouchEvent(ev);
                }

                int headPaddingTop = headerView.getPaddingTop();
                Log.d("zyr","--------------MotionEvent.ACTION_UP paddingTop:" + headPaddingTop);
                Log.d("zyr","--------------MotionEvent.ACTION_UP state:" + state);
                // 判断当前的状态
                switch (state){
                    case STATE_PULL_TO_SHOW_SEARCH_VIEW:
                        if ( headerHeight - Math.abs(headPaddingTop) <= searchContainerHeight * 0.25){
                            Log.i("zyr", "下拉高度小于Search View * 0.25,隐藏search view");
                            // 隐藏头布局
                            mScroller.startScroll(0,headPaddingTop,0,- headerHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_NONE;
                        } else if( headerHeight - Math.abs(headPaddingTop) >= searchContainerHeight * 0.75) {
                            Log.i("zyr", "下拉高度大于Search View * 0.75,显示search view");
                            // 显示 search view
                            mScroller.startScroll(0,headPaddingTop,0,- refreshHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_PULL_TO_REFRESH;
                        } else if ( moveDiff > 0){
                            Log.i("zyr", "下拉高度在Search View * 0.25 - 0.75,下拉，显示search view");
                            // 显示 search view
                            mScroller.startScroll(0,headPaddingTop,0,- refreshHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_PULL_TO_REFRESH;
                        } else {
                            Log.i("zyr", "下拉高度在Search View * 0.25 - 0.75,上滑，隐藏search view");
                            // 隐藏头布局
                            mScroller.startScroll(0,headPaddingTop,0,- headerHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_NONE;
                        }
                        return true;
                    case STATE_PULL_TO_REFRESH:
                        Log.i("zyr", "ACTION_UP 下拉刷新数据");
                        // 显示search view
                        mScroller.startScroll(0,headerView.getPaddingTop(),0,- refreshHeight - headerView.getPaddingTop(),DURATION);
                        postInvalidate();
                        return true;
                    case STATE_RELEASE_TO_REFRESH:
                        Log.i("zyr", "ACTION_UP 释放刷新数据");
                        // 把头布局设置为完全显示状态
                        mScroller.startScroll(0,headerView.getPaddingTop(),0,-headerView.getPaddingTop(),DURATION);
                        postInvalidate();
                        // 进入到正在刷新中状态
                        state = STATE_REFRESHING;
                        refreshHeaderView();

                        if (mOnRefreshListener != null) {
                            mOnRefreshListener.onDownPullRefresh(); // 调用使用者的监听方法
                        }
                        return true;
                }
                break;
            default :
                break;
        }
        return super.onTouchEvent(ev);
    }

详细代码

CustomSearchListView

package com.example.myapp.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.DecelerateInterpolator;
import android.widget.AbsListView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Scroller;
import android.widget.TextView;

import com.example.myapp.R;

/**
 * Created by zyr
 * DATE: 16-4-8
 * Time: 下午7:09
 * Email: [email protected]
 *
 * 通过listview addHeaderView来实现下拉刷新
 */
public class CustomSearchListView extends ListView implements AbsListView.OnScrollListener {
    private Context mContext;

    private View headerView;

    private TextView headerTv;

    private View searchView;

    private RelativeLayout searchContainer;

    private int headerHeight ;

    private int refreshHeight ;

    private int searchContainerHeight;

    private Scroller mScroller;

    public static final int STATE_NONE  = 0;
    public static final int STATE_PULL_TO_SHOW_SEARCH_VIEW  = 1; // 下拉去展示search_view
    public static final int STATE_PULL_TO_REFRESH = 2; //下拉去刷新
    public static final int STATE_RELEASE_TO_REFRESH = 3; // 释放进行刷新
    public static final int STATE_REFRESHING = 4; // 正在刷新

    private int state = STATE_NONE;
    private int downX , downY , moveY , lastMoveY , upY , upX;
    private int diff , moveDiff;

    public static final int DURATION = 500;
    private OnRefreshListener mOnRefreshListener;

    public interface OnRefreshListener{
        void onDownPullRefresh();
    }

    /************************   构造****************************************/

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

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

    public CustomSearchListView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;

        initScroller();
        initHeaderView();
        addSearchView();
        setOnScrollListener(this);
    }

    private void initScroller() {
        mScroller = new Scroller(getContext(), new DecelerateInterpolator());
    }

    @Override
    public void computeScroll() {
        super.computeScroll();
        if(mScroller.computeScrollOffset()){
            Log.d("zyr" , "-----------computeScroll mScroller.getCurrY():" + mScroller.getCurrY());
            headerView.setPadding(0, mScroller.getCurrY(), 0, 0);
        }
    }

    private void initHeaderView() {
        headerView =  View.inflate(getContext(), R.layout.search_header_listview, null);
        searchContainer = (RelativeLayout) headerView.findViewById(R.id.search_container);
        headerTv = (TextView) headerView.findViewById(R.id.tvHead);
        headerView.measure(0, 0); // 系统会帮我们测量出headerView的高度
        headerHeight = refreshHeight = headerView.getMeasuredHeight();
        Log.d("zyr", "--------------------headerHeight :" + headerHeight);
        headerView.setPadding(0, -headerHeight, 0, 0);
        invalidate();
        Log.d("zyr", "----------------------headerPaddingTop :" + headerView.getPaddingTop());
        super.addHeaderView(headerView, null, false);
    }

    private void addSearchView() {
        searchView = LayoutInflater.from(getContext()).inflate(R.layout.search_view, null);
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        searchContainer.addView(searchView , layoutParams);
        searchContainer.measure(0, 0);
        searchContainerHeight = searchContainer.getMeasuredHeight();
        Log.d("zyr", "--------------------searchContainerHeight :" + searchContainerHeight);
        headerHeight = searchContainerHeight + headerHeight ;
        headerView.setPadding(0, - headerHeight, 0, 0);
        invalidate();
        Log.d("zyr", "--------------------headerHeight :" + headerHeight);
        Log.d("zyr", "----------------------headerPaddingTop :" + headerView.getPaddingTop());
    }

    /**************************     Scroll******************************/
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    }

    /***************************    Touch***************************************/
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN :
                downY = lastMoveY = (int) ev.getY();
                downX = (int) ev.getX();
                break;
            case MotionEvent.ACTION_MOVE :
                moveY = (int) ev.getY();
                moveDiff = (moveY - lastMoveY)/2 ;
                lastMoveY = moveY ;
                diff = moveY - downY;
                //
                int paddingTop =   headerView.getPaddingTop() + moveDiff ;
                // 如果: 第一个可见
                if(getFirstVisiblePosition() == 0 && Math.abs(diff) > 50){
                    switch (state){
                        case STATE_NONE :
                            if(diff > 0){
                                state = STATE_PULL_TO_SHOW_SEARCH_VIEW;
                                headerView.setPadding(0, paddingTop, 0, 0);
                                Log.d("zyr", "--------------paddingTop:" + paddingTop);
                                return true;
                            }
                            break;
                        case STATE_PULL_TO_SHOW_SEARCH_VIEW:
                        case STATE_PULL_TO_REFRESH:
                        case STATE_RELEASE_TO_REFRESH:
                            if (paddingTop >= 0 ) { // 完全显示了.
                                Log.i("zyr", "ACTION_MOVE 松开刷新");
                                state = STATE_RELEASE_TO_REFRESH;
                                refreshHeaderView();
                            } else if (paddingTop < 0 && Math.abs(paddingTop) <= refreshHeight) {
                                Log.i("zyr", "ACTION_MOVE 下拉刷新");
                                state = STATE_PULL_TO_REFRESH;
                                refreshHeaderView();
                            }  else if(paddingTop < 0 && Math.abs(paddingTop) > refreshHeight) {
                                Log.i("zyr", "ACTION_MOVE 下拉显示Search View");
                                state = STATE_PULL_TO_SHOW_SEARCH_VIEW;
                                refreshHeaderView();
                            }  else if ( paddingTop == 0){
                                state = STATE_NONE;
                                break;
                            }
                            // 下拉头布局
                            Log.d("zyr","--------------paddingTop:" + paddingTop);
                            headerView.setPadding(0, paddingTop, 0, 0);
                            return true;
                        default:
                            break;
                    }
                }
                break;
            case MotionEvent.ACTION_UP :
                upY = (int)ev.getY();
                upX = (int)ev.getX();
                // 判读是不是点击事件
                if(Math.abs(upY - downY) < 50 && Math.abs(upX - downX) < 50){
                    super.onTouchEvent(ev);
                }
                // 判断当前的状态
                int headPaddingTop = headerView.getPaddingTop();
                Log.d("zyr","--------------MotionEvent.ACTION_UP paddingTop:" + headPaddingTop);
                Log.d("zyr","--------------MotionEvent.ACTION_UP state:" + state);
                switch (state){
                    case STATE_PULL_TO_SHOW_SEARCH_VIEW:
                        if ( headerHeight - Math.abs(headPaddingTop) <= searchContainerHeight * 0.25){
                            Log.i("zyr", "下拉高度小于Search View * 0.25,隐藏search view");
                            // 隐藏头布局
                            mScroller.startScroll(0,headPaddingTop,0,- headerHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_NONE;
                        } else if( headerHeight - Math.abs(headPaddingTop) >= searchContainerHeight * 0.75) {
                            Log.i("zyr", "下拉高度大于Search View * 0.75,显示search view");
                            // 显示 search view
                            mScroller.startScroll(0,headPaddingTop,0,- refreshHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_PULL_TO_REFRESH;
                        } else if ( moveDiff > 0){
                            Log.i("zyr", "下拉高度在Search View * 0.25 - 0.75,下拉，显示search view");
                            // 显示 search view
                            mScroller.startScroll(0,headPaddingTop,0,- refreshHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_PULL_TO_REFRESH;
                        } else {
                            Log.i("zyr", "下拉高度在Search View * 0.25 - 0.75,上滑，隐藏search view");
                            // 隐藏头布局
                            mScroller.startScroll(0,headPaddingTop,0,- headerHeight - headPaddingTop , DURATION);
                            postInvalidate();
                            state = STATE_NONE;
                        }
                        return true;
                    case STATE_PULL_TO_REFRESH:
                        Log.i("zyr", "ACTION_UP 下拉刷新数据");
                        // 显示search view
                        mScroller.startScroll(0,headerView.getPaddingTop(),0,- refreshHeight - headerView.getPaddingTop(),DURATION);
                        postInvalidate();
                        return true;
                    case STATE_RELEASE_TO_REFRESH:
                        Log.i("zyr", "ACTION_UP 释放刷新数据");
                        // 把头布局设置为完全显示状态
                        mScroller.startScroll(0,headerView.getPaddingTop(),0,-headerView.getPaddingTop(),DURATION);
                        postInvalidate();
                        // 进入到正在刷新中状态
                        state = STATE_REFRESHING;
                        refreshHeaderView();

                        if (mOnRefreshListener != null) {
                            mOnRefreshListener.onDownPullRefresh(); // 调用使用者的监听方法
                        }
                        return true;
                }
                break;
            default :
                break;
        }
        return super.onTouchEvent(ev);
    }
    /**
     * 根据currentState刷新头布局的状态
     */
    private void refreshHeaderView() {
        switch (state) {
            case STATE_PULL_TO_REFRESH : // 下拉刷新状态
            case STATE_PULL_TO_SHOW_SEARCH_VIEW:
                headerTv.setText("下拉刷新");
                break;
            case STATE_RELEASE_TO_REFRESH : // 松开刷新状态
                headerTv.setText("松开刷新");
                break;
            case STATE_REFRESHING : // 正在刷新中状态
                headerTv.setText("正在刷新中...");
                break;
            default :
                break;
        }
    }

    /**
     * 隐藏头布局
     */
    public void hideHeaderView() {
        post(new Runnable() {
            @Override
            public void run() {
                mScroller.startScroll(0,headerView.getPaddingTop(),0,- headerHeight -headerView.getPaddingTop(),DURATION);
                postInvalidate();
                headerTv.setText("下拉刷新");
                state = STATE_NONE;
            }
        });
    }

    /**
     * 设置刷新监听事件
     *
     * @param listener
     */
    public void setOnRefreshListener(OnRefreshListener listener) {
        mOnRefreshListener = listener;
    }

}

search_header_listview.xml

<?xml version="1.0" encoding="utf-8"?><!-- ListView的头部 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- 内容 -->

    <RelativeLayout
        android:id="@+id/head_contentLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
        <RelativeLayout android:id="@+id/refresh_container"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:gravity="center">
            <TextView
                android:id="@+id/tvHead"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/pull_to_refresh_pull_label"
                android:textColor="@color/black"
                android:textSize="15.5sp"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout android:id="@+id/search_container"
            android:layout_below="@+id/refresh_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </RelativeLayout>
    </RelativeLayout>

</LinearLayout>

search_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="Search"
        android:gravity="center"
        android:background="@drawable/common_bg2"
        android:layout_margin="5dp"
        android:textSize="15sp"/>
</LinearLayout>

CustomSearchListViewTestActivity

package com.example.myapp.activity;

import android.view.View;
import android.widget.AdapterView;
import android.widget.FrameLayout;

import com.example.myapp.R;
import com.example.myapp.adapter.CommonAdapter;
import com.example.myapp.util.Methods;
import com.example.myapp.view.CustomPullToRefreshListView2;
import com.example.myapp.view.CustomSearchListView;

import java.util.ArrayList;

/**
 * Created by zyr
 * DATE: 16-4-6
 * Time: 下午4:05
 * Email: [email protected]
 */
public class CustomSearchListViewTestActivity extends BaseActivity {
    private FrameLayout headRoot;
    private FrameLayout headContainer;
    private CustomSearchListView listView;
//    private PullToRefreshListView listView;

    private CommonAdapter commonAdapter;
    private ArrayList<String> strings  = new ArrayList<>();

    @Override
    protected void initView() {
        listView = (CustomSearchListView) findViewById(R.id.listview);
        for(int i=0;i<20;i++){
            strings.add("zyr" + i);
        }
        commonAdapter = new CommonAdapter(this,strings);
        listView.setAdapter(commonAdapter);
        listView.setOnRefreshListener(new CustomSearchListView.OnRefreshListener() {
            @Override
            public void onDownPullRefresh() {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            Thread.sleep(1000);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        listView.hideHeaderView();
                    }
                }).start();
            }
        });
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Methods.toast(CustomSearchListViewTestActivity.this,id+"");
            }
        });
    }

    @Override
    protected int onSetContainerViewId() {
        return R.layout.activity_custom_search_listview;
    }

    @Override
    public void initListener() {

    }

    @Override
    public void onClick(View v) {

    }
}
时间： 2024-10-28 09:49:03

仿今日头条下拉出现SearchBar,再下拉刷新效果，SearchListView实现以及原理讲解的相关文章

Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）

前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和拖拽) 今天把相对照较复杂的gridView的拖拽也记录下.在開始之前我们事先要了解下Android的事件分发机制.网上这方面的资料也比較多.由于自己定义控件大部分要用到事件分发机制的知识. 实现思路 要实现Item的拖拽.事实上并非真正要去拖拽GridView的Item.而是使用WindowMan

[转]灯灯小程序开发手记：仿今日头条（上）

本文转自:http://www.jianshu.com/p/a1e0b8abb12d 写在前面 新的一年,祝大家新年快乐!当然对于程序员来说,新的一年,也要有新的改变.因此灯灯决定凑热闹编写微信小程序啦! 上一篇文章<记一次小程序开发过程>中,灯灯大致写了下自己第一次开发小程序的感受和流程.这一次灯灯会详细记录下自己制作一个小程序的思路.遇到的问题.涉及到的代码等和大家分享.    视频教程地址:http://study.163.com/course/introduction.htm?cour

仿今日头条和qq侧滑和智慧北京的小项目 3

仿今日头条和QQ侧滑和智慧北京的小项目3 本项目图片素材均来自今日头条,QQ侧滑没有使用Android原生的NavigationDrawer,而使用的是第三方SlidingMenu,原因是这个控件暂时没有仔细研究(后期会研究并写demo),项目整体可以说是使用了一个Activity加多个Fragment,全部采用沉寂式. 前文摘要:仿今日头条和QQ侧滑和智慧北京的小项目2 TabPager(NewsPager新闻页面对应的11个子页面) 此页面相对比较复杂,所以单独用一篇blog来说明都处理了哪

iOS仿今日头条滑动导航

之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问题,以及上面导航栏的便宜量. 2.网易首页导航封装类优化中主要解决iOS7以上滑动返回功能中UIScreenEdgePanGestureRecognizer与ScrollView的滑动的手势冲突问题. 今天仿今日头条滑动导航和网易首页导航封装类优化相似,这个也是解决手势冲突,UIPanGesture

vue2.0仿今日头条开源项目

vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub上看到了很多高仿webapp的好项目.由此在有了一定的技术积累后,开始构思使用Vue写今日头条,一是自己对于头条的喜爱,另外也是对于自己学习成果的检验. 技术栈 vue.js 2.0全家桶(vue.vuex.vue-router) axios.jsonp element-ui.iview vue-l

基于Vue 2.0高仿 &lt;今日头条&gt; 单页应用。

这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 技术栈 vue.js 2.0全家桶(vue.vuex.vue-router) axios.jsonp element-ui.iview vue-lazyload.animate.css.moment.flexible.js 在线地址 线上地址(预览地址) GitHub源码地址 说明 项目内定死 账号: admin, 密码: admin. 因为数据原因,首页请求的数据接口来自网页版今日头条,修改了一

仿今日头条的graidview拖动

下面先上这次实现功能的效果图:(注:这个效果图没有拖拽的时候移动动画,DEMO里面有,可以下载看看) 三.开发思路 1.  获取数据库中频道的列表,如果为空,赋予默认列表,并存入数据库,之后通过对应的适配器赋给对应的GridView 2.  2个GridView--(1.DragGrid   2. OtherGridView) DragGrid 用于显示我的频道,带有长按拖拽效果 OtherGridView用于显示更多频道,不带推拽效果 注:由于屏幕大小不一定,外层使用ScrollView,所以

iOS新闻应用源码，高仿今日头条源码等

iOS精选源码 城市列表选择 一款非常时尚的照片选择插件 优酷播放按钮动画 BRPickerView是iOS的选择器组件,主要包括:日期选择器.时... 选择位置坐下动画Demo BAButton 图片.文字.倒计时等 git 功能最全的 button 分类 企业级完整iOS项目-<新闻来了> 较为美观的多级展开列表 高仿今日头条6.2.6 Swift 简单画板的swift实现 iOS优质博客 创建一个私有的 Pods 详解 前言骚年,你听说过组件化吗?没有?但你一定玩过乐高玩具,乐高玩具本身

项目记录，仿今日头条app

项目记录,仿今日头条app,五六月份主要做的项目,第一版已经完成上架,二次开发正在进行中