私は Cheesesquare サンプル プロジェクトに従って、新しいデザイン マテリアル ライブラリを理解しています。
CollapsingToolbarLayout ウィジェットによって提供される単純な Title の代わりに、ImageView、タイトル、およびサブタイトルでカスタム ビュー (Telegram など) を使用する方法があるかどうか疑問に思っています。
ありがとう。
私は Cheesesquare サンプル プロジェクトに従って、新しいデザイン マテリアル ライブラリを理解しています。
CollapsingToolbarLayout ウィジェットによって提供される単純な Title の代わりに、ImageView、タイトル、およびサブタイトルでカスタム ビュー (Telegram など) を使用する方法があるかどうか疑問に思っています。
ありがとう。
私は同じ問題を抱えていて、解決策を見つけるのに何時間も費やしました。私の解決策は、折りたたみビュー (ImageView と TextView) を内部に追加しCollapsingToolbarLayout
、コードで遷移を処理することでした。この方法は、CollapsingToolbarLayout から拡張するよりも柔軟でシンプルです。
CollapsingToolbarLayout
最初に、視差プロパティを使用しての中にビューを追加する必要があります。
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop:"80dp"
android:src="@drawable/icon"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here
次に、以下を使用してビューのスケーリングを設定しますOnOffsetchangeListner
。
private static final float SCALE_MINIMUM=0.5f;
appBarLayout.setOnWorkingOffsetChange(new ControllableAppBarLayout.OnWorkingOffsetChange() {
@Override
public void onOffsetChange(int offSet, float collapseDistance) {
imageView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM));
imageView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM));
textView.setScaleX(1 + (collapseDistance * SCALE_MINIMUM));
textView.setScaleY(1 + (collapseDistance * SCALE_MINIMUM));
// You can also setTransitionY/X, setAlpha, setColor etc.
}
});
どういうわけか、デフォルトoffsetChangedListener
は適切に機能しませんでした (おそらく、最初にデフォルトのリスナーで試してみてControllableAppBarLayout
ください)。
private OnWorkingOffsetChange onWorkingOffsetChange;
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (!isInEditMode()) {
onWorkingOffsetChange.onOffsetChange(i, (float) i / appBarLayout.getTotalScrollRange());
}
}
public void setOnWorkingOffsetChange(OnWorkingOffsetChange listener) {
this.onWorkingOffsetChange = listener;
}
public interface OnWorkingOffsetChange {
void onOffsetChange(int offSet, float collapseDistance);
}
唯一の問題は、ツールバーを折りたたんでもビューが表示されるように、 にapp:contentScrim="#00000000"
(透明)を設定する必要があることです
。CollapsingToolbarLayout
崩壊する背景効果が本当に必要な場合は、背景の ImageView のアルファをOffsetChangeListener
. ;)
クリストファーの回答を少し編集して、折りたたみ時にカスタムビューが消えないようにする方法を示します。
CollapsingToolbarLayout
最初に、視差プロパティを使用しての中にビューを追加する必要があります。
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop:"80dp"
android:src="@drawable/icon"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/> //set vertical transition here
代わりに、カスタム ビューをプログラムで追加すると、折りたたんでも消えません。たとえば、タイトルとサブタイトルを含むビューは次のとおりです。
final FrameLayout frameLayout = new FrameLayout(mActivity);
FrameLayout.LayoutParams frameLayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT);
frameLayout.setLayoutParams(frameLayoutParams);
// Create new LinearLayout
final LinearLayout linearLayout = new LinearLayout(mActivity);
frameLayoutParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, dpToPixels(78));
frameLayoutParams.gravity = Gravity.BOTTOM;
linearLayout.setLayoutParams(frameLayoutParams);
linearLayout.setOrientation(LinearLayout.VERTICAL);
// Add textviews
final TextView textView1 = new TextView(mActivity);
LinearLayout.LayoutParams linearLayoutParams =new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
frameLayoutParams.gravity = Gravity.BOTTOM;
textView1.setLayoutParams(linearLayoutParams);
textView1.setText("Title");
textView1.setTextColor(ContextCompat.getColor(mActivity, R.color.colorWhite));
textView1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 40);
linearLayout.addView(textView1);
final TextView textView2 = new TextView(mActivity);
linearLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
textView2.setLayoutParams(linearLayoutParams);
textView2.setText("Subtitle");
textView2.setTextColor(ContextCompat.getColor(mActivity, R.color.colorWhite));
textView2.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
linearLayout.addView(textView2);
frameLayout.addView(linearLayout);
collapsingToolbar.addView(frameLayout);
final float SCALE_MIN=0.4f;
AppBarLayout appBarLayout = (AppBarLayout) mActivity.findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offSet) {
float collapsedRatio = (float) offSet / appBarLayout.getTotalScrollRange();
linearLayout.setScaleX(1 + (collapsedRatio * SCALE_MIN));
linearLayout.setScaleY(1 + (collapsedRatio * SCALE_MIN));
FrameLayout.LayoutParams frameLayoutParams =new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, dpToPixels(78));
frameLayoutParams.gravity = Gravity.BOTTOM;
frameLayoutParams.setMargins(Math.round(dpToPixels(48) * (1+collapsedRatio)), 0, 0, Math.round(dpToPixels(15) * collapsedRatio));
linearLayout.setLayoutParams(frameLayoutParams);
// You can also setTransitionY/X, setAlpha, setColor etc.
}
});
/////
float lastCollapsedRatio = -2;
////
private int dpToPixels(int padding_in_dp){
final float scale = getResources().getDisplayMetrics().density;
int padding_in_px = (int) (padding_in_dp * scale + 0.5f);
return padding_in_px;
}
カスタム ビューをツールバーに追加することが可能だったように、ウィジェット自体から、これを直接有効にする方法はないようです。
ただし、 のソースを開いて、 がタイトル セットにCollapsingToolbarLayout.class
どのように使用されているかを調べることができます。CollapsingTextHelper.class
から拡張して、独自のウィジェットを作成してみることができますCollapsingToolbarLayout
。
これらのリンクは、カスタム コンポーネント/ビューを作成したことがない場合に役立ちます: カスタム ビュー、カスタム コンポーネント
私はまだこれを試していませんが、実際には、あなたが探しているのと同様の解決策を達成しようと考えていました. これまでのところ、私がたどる手順は次のとおりです。
attrs.xml
MyCollapsingToolbarLayout
元のものを拡張して独自のものを作成します。super
元のコンポーネントがそのまま残るように、必ずコンストラクターを呼び出してください。subtitleTextHelper
コンポーネントに new を追加して を作成CollapsingTextHelper
します。onDraw
サブタイトルを実際に描画するようにオーバーライドします。CollapingsToolbarLayout
ます (デフォルトのスタイルなど、おそらく固定字幕テキスト)。Activity
を含むに変更を適用しますCollapsingToolbar
。CollapsingToolbarlayout
(への変換MyCollapingsToolbarLayout
、字幕の設定、追加のカスタム設定など)。これから見ていきます。