listview滑动,变换动画

本文介绍了一种在米多大众APP中实现产品中心效果优化的方法,具体包括当ListView向上滑动时,顶部视图进行动画效果展示,并且能够左右滑动。通过在HorizontalScrollView中嵌套LinearLayout,动态调整辅助View的宽度来实现这一效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

笔记:


米多大众app:产品中心效果原型优化


大概效果:listview向上滑动,顶部view做动画,顶部view可以左右滑动


效果:

                                        





代码:要滑动到顶部的时候可以左右滑动,那么外层需要是个HorizontalScrollView


开始想要在滑动listview的时候动态改变horizontalscrollview子view的宽度,但是发现这个宽度没法改变,这个宽度是由子view的总宽度决定的,所以之呢过加个辅助view,一个像素的宽度,动态改变这个view的宽度



代码:

package cn.edu.sxu.www.changeheadheight;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private ListView listview;

    private MyAdapter myAdapter;

    private List<String> lists;

    private View headView;

    private ImageView iv_2;

    private ImageView iv_3;

    private View key_view;

    private HorizontalScrollView horizontalScrollView;


    private LinearLayout ll_parent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv_2= (ImageView) findViewById(R.id.iv_2);

        iv_3= (ImageView) findViewById(R.id.iv_3);
        headView= LayoutInflater.from(this).inflate(R.layout.head,null);
        listview= (ListView) findViewById(R.id.listview);

        key_view=findViewById(R.id.key_view);

        ll_parent= (LinearLayout) findViewById(R.id.ll_parent);
        horizontalScrollView= (HorizontalScrollView) findViewById(R.id.horizontalScrollView);
        lists=new ArrayList<>();

        for(int i=0;i<20;i++)
        {
            lists.add(""+i);
        }
        myAdapter=new MyAdapter(this,lists);
        listview.addHeaderView(headView);
        listview.setAdapter(myAdapter);


        listview.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {

            }

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

                changeHeadHeight(getScrollY());
            }
        });
    }

    private void changeHeadHeight(int height)
    {
        Log.e("abc",height+"aaaaaaa");
        if (height > 500) height = 500;
        ViewGroup.LayoutParams layoutParams =  ll_parent.getLayoutParams();
        layoutParams.height = 750-height;
        ll_parent.setLayoutParams(layoutParams);

        ViewGroup.LayoutParams kayParams =  key_view.getLayoutParams();
        kayParams.width = 500+2*height;
        key_view.setLayoutParams(kayParams);


        makeAnimation(height*1.0f/500);
    }

    private void makeAnimation(float fraction)
    {

        iv_2.setTranslationY(evaluate(fraction,0,-250));
        iv_2.setTranslationX(evaluate(fraction,0,500));

        iv_3.setTranslationY(evaluate(fraction,0,-500));
        iv_3.setTranslationX(evaluate(fraction,0,1000));
    }


    /**
     * @param fraction   变换因子
     * @param startValue 起始值
     * @param endValue   结束指
     * @return
     */
    public Float evaluate(float fraction, Number startValue, Number endValue) {
        float startFloat = startValue.floatValue();
        return startFloat + fraction * (endValue.floatValue() - startFloat);
    }
    /**
     * 使用与listview的item高度都相同的情况,head无所谓
     * @return
     */
    public int getScrollY() {
        View c = listview.getChildAt(0);
        if (c == null) {
            return 0;
        }
        int firstVisiblePosition = listview.getFirstVisiblePosition();
        int top = c.getTop();
        if(firstVisiblePosition==0)
        {
            return -top;
        }
        else
        {
            //只适合本项目
            return  iv_2.getHeight()+iv_3.getHeight();
        }

    }

}


package cn.edu.sxu.www.changeheadheight;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.List;

/**
 * Created by ${huozhenpeng} on 17/6/29.
 * Company : www.miduo.com
 */

public class MyAdapter extends BaseAdapter {
    private Context context;
    private List<String> lists;
    public MyAdapter(Context context, List<String> lists)
    {
        this.context=context;
        this.lists=lists;

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView= LayoutInflater.from(context).inflate(R.layout.item,null);
        TextView textView= (TextView) convertView.findViewById(R.id.text);
        textView.setText(lists.get(position));
        return convertView;
    }
}



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cn.edu.sxu.www.changeheadheight.MainActivity">


   <ListView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/listview"
       >

   </ListView>

   <HorizontalScrollView
       android:scrollbars="none"
       android:id="@+id/horizontalScrollView"
       android:background="#00aaaa"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

      <LinearLayout
          android:background="#ff0000"
          android:layout_width="wrap_content"
          android:layout_height="750px"
          android:orientation="vertical"
          android:id="@+id/ll_parent"
          >
         <View
             android:id="@+id/key_view"
             android:layout_width="wrap_content"
             android:layout_height="1px"
            />
         <ImageView
             android:id="@+id/iv_1"
             android:background="#ff00ff"
             android:layout_width="500px"
             android:layout_height="250px"
             android:src="@mipmap/ic_launcher"
             />
         <ImageView
             android:id="@+id/iv_2"
             android:background="#00ff00"
             android:layout_width="500px"
             android:layout_height="250px"
             android:src="@mipmap/ic_launcher"
             />
         <ImageView
             android:id="@+id/iv_3"
             android:background="#00ffa0"
             android:layout_width="500px"
             android:layout_height="250px"
             android:src="@mipmap/ic_launcher"
             />
      </LinearLayout>
   </HorizontalScrollView>

</RelativeLayout>


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


   <TextView
       android:layout_width="match_parent"
       android:layout_height="750px"
       android:id="@+id/textview"
       android:background="#ffffff"
       />
</LinearLayout>



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:gravity="center"
        />
</RelativeLayout>




源码地址:点击打开链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值