仿小紅書根據圖片高度自適應viewpager高度輪播圖
阿新 • • 發佈:2019-01-29
之前不瞭解小紅書,直到有一天經理說看見一個他想要的效果,跟小紅書一樣,趕緊下載小紅書來看看,寫起來賊費勁的一個自適應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; }恩,大概就這樣,自己看吧。~~~