Ho iniziato a giocare con coordinatoralyout e sto cercando di ottenere il comportamento sull'immagine allegata, voglio che l'immagine di sfondo sia a schermo intero e su una pergamena voglio che alcune visioni del testo scompaiano e alcune restino come parti di un viewpager (piuttosto che di una barra degli strumenti) qualsiasi indicazione su come posso ottenere questo?Utilizzo di un coordinatorlayout per comprimere un'immagine a schermo intero e sostituirla con viewpager con intestazioni
risposta
È possibile utilizzare layout_behavior per gestire le stringhe che si desidera vengano eliminate durante lo scorrimento. Personalizza il tuo comportamento vista utilizzando CoordinatorLayout.Behavior
ViewBehavior.java
public class ViewBehavior extends CoordinatorLayout.Behavior<RelativeLayout> {
private Context mContext;
public ViewBehavior(Context context, AttributeSet attrs) {
mContext = context;
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, RelativeLayout child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, RelativeLayout child, View dependency) {
child.measure(View.MeasureSpec.makeMeasureSpec(parent.getWidth(), View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(parent.getHeight(), View.MeasureSpec.AT_MOST));
int maxScroll = ((AppBarLayout) dependency).getTotalScrollRange();
float percentage = Math.abs(dependency.getY())/(float) maxScroll;
float childPosition = dependency.getHeight()
+ dependency.getY()
- child.getMeasuredHeight()
- (getToolbarHeight() - child.getMeasuredHeight()) * percentage/2;
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
child.setLayoutParams(lp);
child.setY(childPosition);
return true;
}
public int getToolbarHeight() {
int result = 0;
TypedValue tv = new TypedValue();
if (mContext.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
result = TypedValue.complexToDimensionPixelSize(tv.data, mContext.getResources().getDisplayMetrics());
}
return result;
}
}
Nel file XML di layout, impostare il vostro comportamento visualizzazione personalizzata come un app : layout_behavior nella vista che si desidera gestire.
activity_main.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="@+id/llViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.astuetz.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:textColor="@color/red"
app:pstsShouldExpand="true"
app:pstsTextAllCaps="true" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.stacktest.ViewBehavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="36dp"
android:layout_marginTop="20dp"
android:text="Text-1" />
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="36dp"
android:layout_marginTop="20dp"
android:text="Text-2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/txt2"
android:layout_marginBottom="20dp"
android:layout_marginLeft="36dp"
android:paddingRight="20dp"
android:text="Text-3" />
<TextView
android:id="@+id/txt4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@id/txt2"
android:layout_marginBottom="20dp"
android:layout_marginRight="36dp"
android:text="Text-4" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
Infine, utilizzare il layout e creare ViewPager e le schede nella tua classe di attività.
MainActivity.java
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
((CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar)).setTitle(" ");
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
PagerSlidingTabStrip tabsStrip = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabsStrip.setViewPager(viewPager);
}
public class MyPagerAdapter extends FragmentPagerAdapter {
final int PAGE_COUNT = 2;
private String tabTitles[] = new String[] { "Tab1", "Tab2" };
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public int getCount() {
return PAGE_COUNT;
}
@Override
public Fragment getItem(int position) {
return TestFragment.newInstance(position + 1);
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
}
Add seguente dipendenza in più in build.gradle con appcompat e libreria di supporto.
- com.android.support:design:23.2.1
- com.astuetz: pagerslidingtabstrip: 1.0.1 (per le schede ViewPager)
Questo è * quasi * esattamente ciò di cui ho bisogno! Ho visto la classe di comportamento su un tutorial che ho letto \ visto da quando ho postato questo, ma non posso realmente applicarlo all'immagine. nella mia domanda il colore verde dovrebbe essere l'immagine (cioè scala = fitXY) e voglio ridurla per "agire" come un barlayout - hai un indizio su come posso farlo? – crazyPixel
Aggiungi immagine a ImageView (android: src) con scaleType = fitXY. Rimuovi **
Come io non sono sicuro se si desidera un particolare o di una soluzione generale, ho intenzione di darvi la mia soluzione per la vostra domanda particolare. La chiave è lavorare con scrollFlags
e collapseMode
. Se si in realtà si desidera nascondere le schede quando la barra delle applicazioni è espansa, è possibile giocare con la visibilità.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap">
<RelativeLayout
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="375dp"
android:src="@drawable/ic_launcher"/>
<LinearLayout
android:layout_marginBottom="30dp"
android:layout_below="@+id/image"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="textView1"/>
<TextView
android:layout_marginLeft="140dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="textView2"/>
</LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/mToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_marginLeft="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="textView3"/>
<TextView
android:layout_marginLeft="140dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="textView4"/>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/tab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
Grazie, tuttavia, ho bisogno che la vista immagine abbia un match_parent sul suo highet, quindi sarà lo sfondo del CollapseingoolbarLayout. Essentialy Ho bisogno della visualizzazione di immagini per avere un evento di tocco in cui agisce come la parte inferiore di un comando di compressione (il responsabile per la minimizzazione della barra superiore) – crazyPixel
Ma per il CollapsingToolbarLayout è necessario impostare l'altezza massima.Se vuoi, puoi impostare match_parent sulla visualizzazione di immagini, ma dovrai impostare un'altezza per il layout contenente la tua imageView. Per l'evento touch, basta aggiungere un clickListener all'immagine e comprimere la barra degli strumenti in modo programmatico come "appBarLayout.setExpanded (true/false)" –
Il fatto è che voglio ottenere qualcosa di simile a questo - http: //saulmm.github .io/mastering-coordinator solo con la vista di immagini di sfondo per essere a schermo intero, e lasciare che sia trascinabile. posizionare un onclicklistener non risolverà il mio problema poiché non risponde alla mia domanda su come ottenerlo ... – crazyPixel
http://d-codepages.com/collapsing-toolbar-android-example/
questo link dovrebbe aiutare. Puoi giocare con questo progetto di esempio.
- 1. CoordinatorLayout bambini non sono a schermo intero
- 2. per giocare a schermo intero con Android
- 3. CoordinatorLayout non funziona bene con NestedScrollView e viewpager
- 4. Schermo intero con pyqt4?
- 5. Utilizzo di ViewPager con frammenti nativi
- 6. Utilizzo di Flow & Mortar con ViewPager
- 7. CoordinatorLayout all'interno di un altro CoordinatorLayout
- 8. Frammento senza scorrimento in un ViewPager all'interno di CoordinatorLayout
- 9. Utilizzo dello schermo intero Attività
- 10. CoordinatorLayout con Toolbar e frammento
- 11. Strano comportamento del CoordinatorLayout in combinazione con ViewPager
- 12. CoordinatorLayout non funziona con NestedScrollView all'interno Frammento in ViewPager
- 13. Utilizzo di CameraCaptureUI in Windows 10 a schermo intero
- 14. Utilizzo di ViewPager e frammenti
- 15. Comprimere le intestazioni Http
- 16. Android: problemi di scorrimento con recyclerview all'interno di un viewpager
- 17. Passaggio da schermo intero a non intero schermo pop/slide
- 18. immagine di sfondo reattiva a schermo intero con bootstrap
- 19. Esecuzione di VNC a schermo intero con più monitor
- 20. Applicazione Web a schermo intero per Android
- 21. Come visualizzare a schermo intero un QGLWidget?
- 22. Come ottenere Adview sotto Viewpager in CoordinatorLayout
- 23. Come rendere un div a schermo intero e scorrevole?
- 24. Sfocatura gaussiana a schermo intero
- 25. webview con schermo intero in Android
- 26. GLFW Attivazione della modalità a schermo intero con finestra aperta
- 27. React - Componente Schermo intero (con altezza 100%)
- 28. DialogFragment schermo intero con StatusBar traslucido
- 29. Uscita a schermo intero con il tag HTML5
- 30. Espandi un div a schermo intero
Va bene se si possono vedere le schede nel primo stato? O vuoi assolutamente nasconderli? –
Hai guardato il nuovo widget di supporto alla progettazione BottomSheet ... penso che puoi ottenerlo usando BottomSheet .... – Moinkhan