Android簡單仿微博個人資訊頁

heinika1476775901521發表於2017-12-14
Android

weibo_info

用了一些新控制元件，仿的微博介面 主要有向上滑動圖片漸變消失，tablayout使用，用recyclerview解決1-9張圖片的顯示問題，點選圖片後進入viewpager進行縮放，儲存等操作。 layout: photo

效果圖：

2015-12-11-121720.png

2015-12-11-121824.png

2015-12-11-121900.png

應用：

設定向上滾動消失的view

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- 設定圖片-->
<!--新增一個定義了app:layout_collapseMode="parallax" 屬性的ImageView，出現和消失會有過度-->
<ImageView
android:id="@+id/backdrop"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="@drawable/qingdao"
app:layout_collapseMode="parallax"
/>
複製程式碼
Toolbar自定義menu：
//actionbar匯入menu中的設定欄
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar_actions, menu);
return super.onCreateOptionsMenu(menu);
}


TabLayout配合viewpager使用配置標題
<!-- 自定義tab-->
    <!-- 設定可滑動-->
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
//設定ViewPager
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
//設定tablayout，viewpager上的標題
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorPrimaryDark));
}
/**
 * 設定item
 * @param viewPager
*/
private void setupViewPager(ViewPager viewPager) {
    InfoAdapter adapter = new InfoAdapter(getSupportFragmentManager());
    adapter.addFragment(new HomeFragment(), "主頁");
    adapter.addFragment(new WeiBoFragment(), "微博");
    adapter.addFragment(new PhotoFragment(), "相簿");
    viewPager.setAdapter(adapter);
}
/**
 * Created by chenlijin on 2015/12/10. 傳入標題的FragmentPagerAdapter
 */
public class InfoAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragments = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();

public InfoAdapter(FragmentManager fm) {
super(fm);
    }

public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);

    }

@Override
public Fragment getItem(int position) {
return mFragments.get(position);
    }

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

@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
    }
}
複製程式碼

Glide載入圖片：

public static void loadToImageView(String url, ImageView imageView) {
if (url.endsWith("gif")) {
loadToImageViewStaticGif(url, imageView);
    } else {
        Glide.with(BaseApplication.getContext())
                .load(url)
                .placeholder(R.drawable.loading)
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .centerCrop()
                .into(imageView);
    }
}
複製程式碼

Glide下載圖片：

public static void saveImage(String url, final String name) {
    Glide.with(BaseApplication.getContext())
            .load(url)
            .asBitmap()
            .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
            .into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation glideAnimation) {
// Do something with bitmap here.
saveBitmap(name,resource);
                }

            });
}

public static void saveBitmap(String bitName, Bitmap mBitmap) {
    File f = new File("/sdcard/Pictures/" + bitName+".png");
try {
        f.createNewFile();
    } catch (IOException e) {

    }
    FileOutputStream fOut = null;
try {
        fOut = new FileOutputStream(f);
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    }
    mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fOut);
try {
        fOut.flush();
    } catch (IOException e) {
        e.printStackTrace();
    }
try {
        fOut.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
}
複製程式碼

1~9張圖片的載入： 使用recyclerview載入三種不同的佈局。

@Override
public int getItemViewType(int position) {
switch (mShopInfoList.get(position).getImageList().size()) {
case 1:
return PIC_ONE;
case 4:
return PIC_FOUR;
default:
return PIC_OTHER;
    }
}
複製程式碼

share動畫： 1，設定共享元素的標籤
android:transitionName="share"
2，通過ActivityOptions，傳入要分享的view和標籤名
Intent intent = new Intent(mLayoutInflater.getContext(), OnePicZoomInImageActivity.class);
intent.putParcelableArrayListExtra(Config.IMAGE_URL_LIS T, (ArrayList<? extends Parcelable>) imageList); // of both activities are defined with android:transitionName="share" ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation((Activity) mLayoutInflater.getContext(), imageview, "share"); mLayoutInflater.getContext().startActivity(intent,options.toBundle()); 普通activity的切換動畫： mLayoutInflater.getContext().startActivity(intent, ActivityOptions.makeSceneTransitionAnimation((Activity)mLayoutInflater.getContext()).toBundle()); 設定statusbar為透明色 //設定statusbar為透明色 private void setStatusBarColor() { if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION | View.SYSTEM_UI_FLAG_LAYOUT_STABLE); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); window.setNavigationBarColor(Color.TRANSPARENT); } 給imageview新增手勢操作 PhotoViewAttachermAttacher; mAttacher = new PhotoViewAttacher(mImageView);

遇到的問題：

viewpager和photoview一起使用崩潰的問題 java.lang.IllegalArgumentException: pointerIndexoutofrange

public class PictureChildViewPager extends ViewPager {
public PictureChildViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}

public PictureChildViewPager(Context context) {
super(context);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
try {
return super.onInterceptTouchEvent(ev);
} catch (IllegalArgumentException e) {
e.printStackTrace();
return false;
}
}

@Override
public boolean onTouchEvent(MotionEvent arg0) {
try {
return super.onTouchEvent(arg0);
} catch (IllegalArgumentException ex) {
return false;
}
}
複製程式碼

scrollview下巢狀viewpager，viewpager高度不顯示 // //解決viewpager高度無法顯示問題 // mNestedScrollView.setFillViewport(true); 設定linearlayout在appbarlayout下

沒有解決的問題

share動畫，開啟的activity是viewpager返回時的圖片不對 glide載入網路上的長圖時，寬度設定為match失效 glide載入圖片時，如果設定圖片為match match圖片會先顯示在上方再移動到中間

github：

https://heinika.github.io/
原始碼：https://github.com/heinika/weibo_info

相關文章