Coordinano Layout初体験とタイトルバーの下の写真の弾き返し効果
17742 ワード
最近はmaterial designを研究していますが、Coordination Layoutというレイアウトを知っていますので、研究と勉強のもとに、demoを書きました.加えて、拡張は一つのタイトルバーの下の絵をまねた弾き返し効果がありますが、Coordinasolayoutを使って実現したのではなく、以下の図を見ます.
最初の効果は、Coordinasolayoutのレイアウトを使用しています. Coordinasolayoutのレイアウトは です.
http://blog.csdn.net/xyz_lmn/articale/details/4855919このブログに詳しい説明があります.いい勉強資料です.どうやってCoordinatolayoutのレイアウトcomple'comple.android.support:design:22.2.1 に加入しますか?レイアウトファイル activitycoordinator 1_layout.xmlはもう一つのscrollViewを通じて同じ効果を実現します.オープンソースのフレームです.私もdemoを真似て書いたことがあります. https://github.com/ksoichiro/Android-ObservableScrollView 実現する効果は基本的に同じです.
二つ目の効果はPullZoomのレイアウトを使っています.状態についてはソースコードを基に少し修正しました.IphoneでQQ音楽を使う時、歌手のページを見て、ステータスバーの下の写真は縮小を防ぐことができます.そしてタイトルバーは変わってきました.下のレイアウトと写真のスクロールは互いに影響しません.
https://github.com/Frank-Zhu/PullZoomView これはオープンソースフレームのアドレスです.修正するには自分でソースコードをコピーしてプロジェクトに入れます.レイアウトファイル activity
以下の方法を追加します.
最初の効果は、Coordinasolayoutのレイアウトを使用しています.
http://blog.csdn.net/xyz_lmn/articale/details/4855919このブログに詳しい説明があります.いい勉強資料です.
"1.0" encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
"@+id/coordinator_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
"match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
"@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
"@+id/ivImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
"@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
"match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
"match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:text="@string/lipsum"/>
public abstract class BaseActivity extends AppCompatActivity{
protected abstract void initView();
protected int getLayoutResId() {
return R.layout.activity_main;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResId());
// StatusBarCompat.compat(this,getResources().getColor(R.color.primary_dark));
SystemBarTintManager tintManager = new SystemBarTintManager(this);
tintManager.setStatusBarTintEnabled(true);
tintManager.setNavigationBarTintEnabled(true);
tintManager.setTintColor(getResources().getColor(R.color.primary_dark));
initView();
}
}/**
* lh on 2016/4/8.
*/
public class Coordinator1Activity extends BaseActivity{
@Override
protected int getLayoutResId() {
return R.layout.activity_coordinator1_layout;
}
@SuppressWarnings("NewApi")
@Override
protected void initView() {
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});
ImageView imageView = (ImageView)findViewById(R.id.ivImage);
imageView.setBackground(getResources().getDrawable(R.drawable.example_header));
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("lh ");
}
}二つ目の効果はPullZoomのレイアウトを使っています.状態についてはソースコードを基に少し修正しました.IphoneでQQ音楽を使う時、歌手のページを見て、ステータスバーの下の写真は縮小を防ぐことができます.そしてタイトルバーは変わってきました.下のレイアウトと写真のスクロールは互いに影響しません.
https://github.com/Frank-Zhu/PullZoomView これはオープンソースフレームのアドレスです.修正するには自分でソースコードをコピーしてプロジェクトに入れます.
"http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
"@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
"@+id/aplha_head"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/transparent">
"@+id/coordinator_head_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="@drawable/common_top_back_icon"/>
"wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="18sp"
android:textColor="@color/alpha_white"/>
public class Coordinator2Activity extends BaseActivity{
PullToZoomScrollViewEx scrollView;
@Override
protected int getLayoutResId() {
return R.layout.activity_coordinator2_layout;
}
@SuppressWarnings("NewApi")
@Override
protected void initView() {
loadViewForCode();
scrollView = (PullToZoomScrollViewEx) findViewById(R.id.scroll_view);
DisplayMetrics localDisplayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(localDisplayMetrics);
int mScreenWidth = localDisplayMetrics.widthPixels;
LinearLayout.LayoutParams localObject = new LinearLayout.LayoutParams(mScreenWidth, (int) (9.0F * (mScreenWidth / 16.0F)));
scrollView.setHeaderLayoutParams(localObject);
findViewById(R.id.coordinator_head_back).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onBackPressed();
}
});
}
private void loadViewForCode() {
scrollView = (PullToZoomScrollViewEx) findViewById(R.id.scroll_view);
View zoomView = LayoutInflater.from(this).inflate(R.layout.profile_zoom_view, null, false);
View contentView = LayoutInflater.from(this).inflate(R.layout.profile_content_view, null, false);
scrollView.setZoomView(zoomView);
scrollView.setScrollContentView(contentView);
// ， view ，
scrollView.setAplhaHead(findViewById(R.id.aplha_head),50);
}
}以下の方法を追加します.
public void setAplhaHead(View head, int headHeightIndp) {
alphaHeadView = head;
mAlphaHeadHeightIndp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, headHeightIndp, getResources().getDisplayMetrics());
}
----------------------
public PullToZoomScrollViewEx(Context context, AttributeSet attrs) {
super(context, attrs);
mScalingRunnable = new ScalingRunnable();
((InternalScrollView) mRootView).setOnScrollViewChangedListener(new OnScrollViewChangedListener() {
@Override
public void onInternalScrollChanged(int left, int top, int oldLeft, int oldTop) {
if (isPullToZoomEnabled() && isParallax()) {
int scrollY = mRootView.getScrollY();
Log.d(TAG, "onScrollChanged --> getScrollY() = " + scrollY);
float f = mHeaderHeight - mHeaderContainer.getBottom() + scrollY;
Log.d(TAG, "onScrollChanged --> f = " + f);
// top view
if (scrollY <= mHeaderHeight - mAlphaHeadHeightIndp) {
alphaHeadView.setBackgroundColor(getResources().getColor(R.color.transparent));
} else {
alphaHeadView.setBackgroundColor(getResources().getColor(R.color.primary));
}
if ((f > 0.0F) && (f < mHeaderHeight)) {
int i = (int) (0.65D * f);
mHeaderContainer.scrollTo(0, -i);
} else if (mHeaderContainer.getScrollY() != 0) {
mHeaderContainer.scrollTo(0, 0);
}
}
}
});
}