一步步实现gif动画下拉(一)

标签：listview   下拉自动刷新   

转载前标明:http://blog.csdn.net/yoyo_newbie/article/details/47167933

就不吹比了，直奔主题.

第一步，先实现头部与内容的组合。继承LinearLayout，让其2个按线性排列。继承LinearLayout好处可以扩展多种下拉，如Listview下拉,gridview下拉，还可以是Recycler实现的瀑布流下拉.

1。本demo是gif播放开源库和RecyclerView实现的，需要加入改开源库。在app目录下的builder-gradle添加如下

dependencies {
    compile fileTree(include: [‘*.jar‘], dir: ‘libs‘)
    compile ‘com.felipecsl:gifimageview:1.2.0‘
    compile ‘com.android.support:recyclerview-v7:22.2.0‘
}

新建一个下拉动画头部文件为refresh_list_header，详细内容为:

<?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="wrap_content"
    android:background="#000000"
    android:padding="8dp"
    android:gravity="center">
    <com.felipecsl.gifimageview.library.GifImageView
        android:id="@+id/gf_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/gif_nv2"
        />
</LinearLayout>

动态图：

gif_nv2.gif

然后开始编写。下拉组件。由于为了扩展多种下拉，我们写个基类支持多种情况。

/**
 *带gif下拉基类
 */
public abstract class BaseGifRefresh<V extends View>  extends LinearLayout
{
    /**
     * 内容部分
     */
    private V childerView;

    protected  abstract V getConvertView(Context context);

    public BaseGifRefresh(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    /**
     * 刷新时候，显示的头部
     */
    private View heanderView;

    /**
     * 初始化ui
     * @param context
     */
    private void init(Context context) {
        //设置垂直布局
        setOrientation(LinearLayout.VERTICAL);
        //添加头部
        heanderView = newHeaderView(context);
        addView(heanderView);
        //添加内容部分
        childerView = newChildView(context);
        addView(childerView);
    }

    /**
     * 构造一个头部header
     * @param context
     * @return
     */
    private View newHeaderView(Context context)
    {
       View  heanderView = LayoutInflater.from(context).inflate(R.layout.refresh_list_header,null);
        LinearLayout.LayoutParams headerViewParams = new LinearLayout.LayoutParams( LayoutParams.MATCH_PARENT,  LayoutParams.WRAP_CONTENT);
        heanderView.setLayoutParams(headerViewParams);
        return heanderView;
    }

    /**
     * 构件内容部分
     * @param context
     * @return
     */
    private V newChildView(Context context)
    {
        LinearLayout.LayoutParams convertViewParams = new LinearLayout.LayoutParams( LayoutParams.MATCH_PARENT,  LayoutParams.MATCH_PARENT);
        convertViewParams.weight = 1;
        V  childView =   getConvertView(context);
        childView.setBackgroundColor(Color.RED);//TODO 为了看效果，测试一下，占据内容为红色部分
        childView.setLayoutParams(convertViewParams);
        return childView;
    }

}

然后写个支持列表的下拉。如线性列表的，我们用RecyclerView来做例子

/**
 * 带动画头部的ListView
 */
public class GifRefreshListView extends BaseGifRefresh<RecyclerView>
{
    @Override
    protected RecyclerView getConvertView(Context context) {
        RecyclerView recyclerView =  new RecyclerView(context);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(linearLayoutManager);
        return recyclerView;
    }

    public GifRefreshListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

编写个MainActivity.java

public class MainActivity extends Activity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
} 

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <sam.widget.GifRefreshListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

效果图为

这gif还没使用播放api，所以是静态的

一步步实现gif动画下拉(一)

标签：listview   下拉自动刷新   

原文地址：http://blog.csdn.net/yoyo_newbie/article/details/47167933