Android APP常见首页效果的实现

总结一下最近做的一个项目首页,也是众多APP常见的首页效果:自动滚动的头图&ListView展示具体信息,效果大概类似于知乎日报的首页
这里写图片描述

写了一个简单的demo,没有仔细去设计布局,仅实现了类似的效果,并加上了google提倡的material design的下拉刷新风格,项目用到了以下几个著名的开源库:
1,图片加载库:imageloader
2,头图的小圆点:androidViewPagerIndicatorlibrary
3,下拉刷新控件:ultra-pullToRefreshlistview

【实现】
思路:总布局是一个ptr-listview,头图通过listview的setHeader设置,如果有分页加载,则加载更多的view通过listview的setFooter实现。头图是一个viewpager,自动滚动通过一个无限循环的handler实现。

【实现效果】
这里写图片描述

【代码结构】
这里写图片描述

【核心代码】
-1:主Activity

package com.baozou.headerviewtest;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ListView;
import android.widget.RelativeLayout;
import com.viewpagerindicator.CirclePageIndicator;
import java.util.ArrayList;
import java.util.List;
import in.srain.cube.views.ptr.PtrFrameLayout;
import in.srain.cube.views.ptr.PtrHandler;
import in.srain.cube.views.ptr.header.MaterialHeader;

public class MainActivity extends AppCompatActivity {
   

    private HeaderPagerAdapter headerPagerAdapter;

    private ViewPager viewPager;

    List<News> newsList = new ArrayList<News>();

    private GestureDetector mTapGestureDetector;

    public static final int MSG_PAGER = 0x01;

    public static final long TICK = 5000;

    private final PagerTimerHandler mPagerTimerHandler = new PagerTimerHandler();

    private CirclePageIndicator mTopPageIndicator;

    //下拉刷新组件
    private PtrFrameLayout mPtrFrameLayout;

    private NewsAdapter newsAdapter;

    private ListView mListView;

    //头部view
    private View mHeaderView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ptr_listview);
        setNews();
        setView();
    }

    private void setNews() {
        for (int i = 0; i < 3; i++) {
            News news = new News();
            news.setTitle("第" + i + "个");
            news.setUrl("http://img5.duitang.com/uploads/blog/201407/17/20140717113117_mUssJ.thumb.jpeg");
            newsList.add(news);
        }
    }

    /**
     * 初始化下拉刷新相关的
     */
    private void initPtrViews() {
        // header
        final MaterialHeader header = new MaterialHeader(this);
        int[] colors = getResources().getIntArray(R.array.google_colors);
        header.setColorSchemeColors(colors);
        header.setLayoutParams(new PtrFrameLayout.LayoutParams(-1, -2));
        header.setPadding(0, DisplayUtils.dpToPixel(this, 15), 0, DisplayUtils.dpToPixel(this, 10));
        header.setPtrFrameLayout(mPtrFrameLayout);

        mPtrFrameLayout.setLoadingMinTime(1000);
        mPtrFrameLayout.setPinContent(true);
        mPtrFrameLayout.setDurationToCloseHeader(100);
        mPtrFrameLayout.setHeaderView(header);
        mPtrFrameLayout.addPtrUIHandler(header);

        mPtrFrameLayout.setPtrHandler(new PtrHandler() {
            @Override
            public boolean checkCanDoRefresh(PtrFrameLayout frame, View content, View header) {
                return true;
            }

            @Override
            public void onRefreshBegin(PtrFrameLayout frame) {
               //刷新操作
            }
    
  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值