1. 程式人生 > >仿小紅書根據圖片高度自適應viewpager高度輪播圖

仿小紅書根據圖片高度自適應viewpager高度輪播圖

之前不瞭解小紅書,直到有一天經理說看見一個他想要的效果,跟小紅書一樣,趕緊下載小紅書來看看,寫起來賊費勁的一個自適應viewpager高度的輪播圖。

效果圖:

直接粘程式碼了:main_activity

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height=
"match_parent" android:fillViewport="true" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <LinearLayout android:layout_width=
"match_parent" android:layout_height="match_parent" android:fillViewport="true" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width=
"match_parent" android:layout_height="800dp" android:background="#ff4422" android:text="Hello World!" /> </LinearLayout> </ScrollView>

MainActivity:

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewpager;
    private String[] urls = {
            "http://f.hiphotos.baidu.com/zhidao/pic/item/3b87e950352ac65cbdbeff61fcf2b21193138a6d.jpg"
, "http://c.hiphotos.baidu.com/zhidao/pic/item/562c11dfa9ec8a1359aa88b6f103918fa0ecc030.jpg",
"http://c.hiphotos.baidu.com/zhidao/pic/item/faf2b2119313b07e6077d3bc0ad7912396dd8cb8.jpg"
};
    private int[] imgheights;
    private int screenWidth;
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
screenWidth = ScreenUtil.getScreenWidth(this);
initView();
}

    public void initView() {
        mViewpager = (ViewPager) findViewById(R.id.viewpager);
Glide.with(this).load(urls[0]).asBitmap().into(new SimpleTarget<Bitmap>() {
            @Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
                float scale = (float) resource.getHeight() / resource.getWidth();
                int defaultheight = (int) (scale * screenWidth);
initViewPager(defaultheight);
}
        });
}

    //獲取第一張圖片高度後,給viewpager設定adapter
private void initViewPager(final int defaultheight) {
        mViewpager.setAdapter(new PagerAdapter() {
            @Override
public int getCount() {
                if (imgheights == null || imgheights.length != urls.length) {
                    imgheights = null;
imgheights = new int[urls.length];
}
                return urls.length;
}


            @Override
public Object instantiateItem(ViewGroup container, final int position) {

                final ImageView imageView = new ImageView(MainActivity.this);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
Glide.with(getApplicationContext()).load(urls[position]).asBitmap().placeholder(R.mipmap.ic_launcher).into(new ImageViewTarget<Bitmap>(imageView) {
                    @Override
protected void setResource(Bitmap loadedImage) {
                        if (loadedImage != null) {
                            float scale = (float) loadedImage.getHeight() / loadedImage.getWidth();
imgheights[position] = (int) (scale * screenWidth);
imageView.setImageBitmap(loadedImage);
} else {
                            Toast.makeText(MainActivity.this, "圖片為空", Toast.LENGTH_LONG).show();
}
                    }
                });
container.addView(imageView);
                return imageView;
}

            @Override
public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView((View) object);
}

            @Override
public boolean isViewFromObject(View view, Object object) {
                return view == object;
}
        });
//ViewPager設定高度
ViewGroup.LayoutParams params = mViewpager.getLayoutParams();
params.height = defaultheight;
mViewpager.setLayoutParams(params);
mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (position == imgheights.length - 1) {
                    return;
}

                //計算ViewPager現在應該的高度,heights[]表示頁面高度的陣列。
int height = (int) ((imgheights[position] == 0 ? defaultheight : imgheights[position])
                        * (1 - positionOffset) +
                        (imgheights[position + 1] == 0 ? defaultheight : imgheights[position + 1])
                                * positionOffset);
//ViewPager設定高度
ViewGroup.LayoutParams params = mViewpager.getLayoutParams();
params.height = height;
mViewpager.setLayoutParams(params);
}

            @Override
public void onPageSelected(int position) {
            }

            @Override
public void onPageScrollStateChanged(int state) {

            }
        });
}

}

還需要一個獲得螢幕寬高的工具類:
/**
 * 獲得螢幕寬度
*
 * @param context
* @return
*/
public static int getScreenWidth(Context context) {
    WindowManager wm = (WindowManager) context
            .getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
    return outMetrics.widthPixels;
}
/**
 *獲取螢幕高度
*/
public static int getScreenHight(Context context){

    WindowManager wm = (WindowManager) context
            .getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
    return outMetrics.heightPixels;
}
恩,大概就這樣,自己看吧。~~~