您的位置:首页 > 其它

仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙

2016-04-06 23:34 323 查看

仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙

百度壁纸系列




主页说完了,我们来实现第二个页面吧,第二个精选其实就是一个壁纸墙,百度壁纸本身也没做下拉刷新,所以我们只考虑上拉加载,其实实现不负责,壁纸墙还是用主页的自定义GridView,但是这里我们还得重写ScroolView来监听他是否滑动到底部,这样吧,我们先来看一下百度壁纸的效果吧:






我们先来自定义一个ScrollView监听滑动到底部



PullScrollView

package com.lgl.baiduwallpaper.view;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
* 刷新的View,主要是监听是否滑动到顶部或者底部
* Created by lgl on 16/4/6.
*/
public class PullScrollView extends ScrollView {

private static  final  String LOAD = "load";

public IcallBack icallBack = null;

//构造方法
public PullScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}

/**
* 手指滑动,不停的调用
* @param l
* @param t
* @param oldl
* @param oldt
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
check();
super.onScrollChanged(l, t, oldl, oldt);
}

/**
* 上下监听
*/
private void check() {
//判断是否上拉到底部
if (getChildAt(0) != null && getChildAt(0).getMeasuredHeight() <= getScrollY() + getHeight()) {
if(LoadReshView.getBottomOrTop()){
return;
}
//回调到下一个页面
icallBack.click(LOAD);
}
}

/**
* 定义一个底部的接口
*/
public interface IcallBack {
public void click(String bottom);
}

/**
* 定义一个方法
*/
public void setIcallBack(IcallBack icallBack) {
this.icallBack = icallBack;
}
}



这里我们就可以写一个组合控件了,把具体功能给全部实现的控件了,我们先定义这样的一个布局



pull_load.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<com.lgl.baiduwallpaper.view.PullScrollView
android:id="@+id/pull_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<com.lgl.baiduwallpaper.view.DisGridView
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp"
android:numColumns="3"
android:id="@+id/mGridView"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp">

<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">

<!--加载更多的进度-->
<ProgressBar
android:id="@+id/proBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="正在加载..." />

</LinearLayout>

</RelativeLayout>
</LinearLayout>
</com.lgl.baiduwallpaper.view.PullScrollView>
</LinearLayout>



那我们就来实现了,我们自定义一个容器



LoadReshView

package com.lgl.baiduwallpaper.view;

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

import com.lgl.baiduwallpaper.R;

/**
* 上啦 刷新
* Created by lgl on 16/4/6.
*/
public class LoadReshView extends LinearLayout {

private static final String LOAD = "load";
private static final int LOADDATA = 1;
private static final int REFREAH = 2;

//监听底部
private PullScrollView pullScrollView;
//数据表格
private DisGridView mGridView;
//下拉显示布局
private LinearLayout linearLayout;

public pullCallBack pull = null;
//没有显示底部布局
private static boolean isShow = false;
/**
* 子线程
*/
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case LOADDATA:
isBottomShow();
isShow = true;
break;
case REFREAH:
isBottomSClose();
isShow = false;
break;
}
super.handleMessage(msg);
}
};

/**
* 构造方法
*
* @param context
* @param attrs
*/
public LoadReshView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}

/**
* 初始化
*/
private void initView() {
//加载布局文件
LayoutInflater inflater = LayoutInflater.from(getContext());
View view = inflater.inflate(R.layout.pull_load, this);
findView(view);
setCallBack();
}

/**
* 实现回调接口
*/
private void setCallBack() {
pullScrollView.setIcallBack(new MyIcallback());
}

/**
* 实现接口
*/
private class MyIcallback implements PullScrollView.IcallBack {

@Override
public void click(String bottom) {
//如果监听到最底部
if (bottom.equals(LOAD)) {
pull.load();
//显示
handler.sendEmptyMessage(LOADDATA);
} else {
pull.reFresh();
}
}
}

/**
* 加载数据的接口
*/
public interface pullCallBack {
//加載
public void load();

//刷新
public void reFresh();
}

/**
* 初始化控件
*
* @param view
*/
private void findView(View view) {
pullScrollView = (PullScrollView) view.findViewById(R.id.pull_scroll);
mGridView = (DisGridView) view.findViewById(R.id.mGridView);
linearLayout = (LinearLayout) view.findViewById(R.id.linearLayout);
}

public void setpullCallBack(pullCallBack pull) {
this.pull = pull;
}

/**
* 判斷是否显示操作
*
* @return
*/
public static boolean getBottomOrTop() {
return isShow;
}

/**
* 显示底部
*/
public void isBottomShow() {
linearLayout.setVisibility(View.VISIBLE);
}

public void isBottomSClose() {
linearLayout.setVisibility(View.GONE);
}

/**
* 数据加载完成
*/
public void dataFinish() {
handler.sendEmptyMessage(REFREAH);
}

/**
* 返回
*
* @return
*/
public PullScrollView getpullScrollView() {
return pullScrollView;
}

/**
* 返回
*
* @return
*/
public DisGridView getGridView() {
return mGridView;
}

}



这里我们就可以去实现这个功能了,GridView需要一个adapter,那就要一个item,也就是一个imageview(实际项目中,是使用smartimageview)的



sele_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:id="@+id/smartimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>



最后,我们就可以来实现精选页SelectFragment的逻辑了



SelectFragment

package com.lgl.baiduwallpaper.fragment;

import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import com.lgl.baiduwallpaper.R;
import com.lgl.baiduwallpaper.view.DisGridView;
import com.lgl.baiduwallpaper.view.LoadReshView;

import java.util.ArrayList;

/**
* 精选
* Created by lgl on 16/3/31.
*/
public class SelectFragment extends Fragment {

private LoadReshView loadview;
private DisGridView myGridView;
private ArrayList<Integer> data = new ArrayList<Integer>();
private myAdapter adapter;

private Handler handle= new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what){
case 100:
adapter.notifyDataSetChanged();
loadview.dataFinish();
break;
}
super.handleMessage(msg);
}
};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.select_fragment, container, false);
findView(view);
return view;
}

/**
* 初始化控件
*
* @param view
*/
private void findView(View view) {
loadview = (LoadReshView) view.findViewById(R.id.myloadview);
//        myGridView = (DisGridView) view.findViewById(R.id.mGridView);
myGridView = loadview.getGridView();
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
init();
}

/**
* 初始化数据
*/
private void init() {
loadview.setpullCallBack(new PullClick());
initGridData();
adapter = new myAdapter(getActivity());
myGridView.setAdapter(adapter);
}

/**
* GridView数据
*/
private void initGridData() {
for (int i = 0; i < 10; i++) {
//添加数据
data.add(R.drawable.nice);
}
}

private class PullClick implements LoadReshView.pullCallBack {
//加载数据
@Override
public void load() {
new Thread(new Runnable() {
@Override
public void run() {

try {
//睡一下
Thread.sleep(2000);
initGridData();
handle.sendEmptyMessage(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}).start();

}

//刷新数据
@Override
public void reFresh() {

}
}

/**
* GridView的Adapter
*/
private class myAdapter extends BaseAdapter {

private Context mContext;
private LayoutInflater inflater;

public myAdapter(Context mContext) {
this.mContext = mContext;
inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
return data.size();
}

@Override
public Object getItem(int position) {
return data.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = inflater.inflate(R.layout.sele_item, null);
viewHolder = new ViewHolder();
viewHolder.imgs = (ImageView) convertView.findViewById(R.id.smartimg);
convertView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
//设置数据
convertView.setLayoutParams(new AbsListView.LayoutParams(AbsListView.LayoutParams.MATCH_PARENT,300));
viewHolder.imgs.setBackgroundResource(R.drawable.nice);

return convertView;
}
}

static class ViewHolder {
ImageView imgs;
}
}



最后的运行效果






这个虽然有些粗糙,但是我们主要还是实现逻辑为主,UI部分大家自行调整哈



Demo下载:http://download.csdn.net/detail/qq_26787115/9484197

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: