कस्टम दृश्य जो अलग-अलग बच्चे के विचारों के साथ तिरछे लेआउट को विभाजित करता है

Question

मैं LinearLayout या RelativeLayout को दो अलग-अलग आकारों में विभाजित कैसे कर सकता हूं और प्रत्येक में अलग-अलग बच्चे के दृश्य होते हैं। ऊपरी भाग में उदाहरण ViewPager और नीचे अनुभाग में एक अलग LinearLayout।

कुछ इस तरह:

मैं यह कैसे प्राप्त कर सकते हैं? कृपया

Answer 1

सबसे आसान तरीका केवल उस तिरछे कट के साथ पृष्ठभूमि छवि बनाना है। यदि आप एक गतिशील लेआउट चाहते हैं और आप वास्तव में विजेट को काटना चाहते हैं, तो Canvas.saveLayer/पुनर्स्थापित करें का उपयोग करें।

private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); 
private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR); 
private Path path = new Path(); 

protected void dispatchDraw(Canvas canvas) { 
    int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG); 
    super.dispatchDraw(canvas); 

    paint.setXfermode(pdMode); 
    path.reset(); 
    path.moveTo(0, getHeight()); 
    path.lineTo(getWidth(), getHeight()); 
    path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics())); 
    path.close(); 
    canvas.drawPath(path, paint); 

    canvas.restoreToCount(saveCount); 
    paint.setXfermode(null); 
} 

सार: इस तरह https://gist.github.com/ZieIony/8480b2d335c1aeb51167

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:showIn="@layout/activity_main"> 

    <com.example.marcin.splitlayout.CutLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <ImageView 
      android:scaleType="centerCrop" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:src="@drawable/mazda" /> 


    </com.example.marcin.splitlayout.CutLayout> 

    <TextView 
     android:layout_margin="16dp" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="Mazda 3" /> 

</LinearLayout> 

Btw। यह बात हाल ही में बहुत लोकप्रिय है :)

Answer 2

आप नीचे की पृष्ठभूमि को ओवरले करने और इसे घूर्णन करने का भी प्रयास कर सकते हैं। पक्षों पर क्लिपिंग से बचने के लिए शायद आपको इसे एक्स दिशा में स्केल करना होगा।

Answer 3

मुझे लगता है कि मुझे इस उत्तर के लिए थोड़ा देर हो चुकी है, लेकिन आपको इसके लिए this amazing tutorial देखना चाहिए। इसकी आसान और बिना किसी बाहरी पुस्तकालय के। उत्पादन हो की तरह होगा:

आप को जोड़ने के लिए layer-list

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:drawable="@color/colorPrimary"/> 
    <item> 
     <bitmap android:src="@drawable/bebe" android:gravity="center" android:alpha="0.1"/> 
    </item> 

    <item android:top="300dp" 
     android:bottom="-300dp" 
     android:left="0dp" 
     android:right="-300dp"> 
     <rotate 
      android:fromDegrees="-10" 
      android:pivotX="0%" 
      android:pivotY="100%"> 
      <shape 
       android:shape="rectangle"> 
       <solid 
        android:color="?android:colorBackground"/> 
      </shape> 
     </rotate> 
    </item> 
</layer-list> 

अब तुम सिर्फ अपने लेआउट में इस drawable जोड़ने की जरूरत की जरूरत है।

<android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/windowBackground" 
     android:fitsSystemWindows="true"> 

     <android.support.design.widget.AppBarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@color/windowBackground" 
      android:fitsSystemWindows="true"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:fitsSystemWindows="true" 
       app:contentScrim="@color/colorPrimary" 
       app:expandedTitleMarginEnd="64dp" 
       app:expandedTitleMarginStart="48dp" 
       app:expandedTitleTextAppearance="@android:color/transparent" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

       <RelativeLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        app:layout_collapseMode="parallax"> 

        <RelativeLayout 
         android:id="@+id/background" 
         android:layout_width="match_parent" 
         android:layout_height="300dp" 
         android:background="@drawable/background_profile_header"></RelativeLayout> 

        <LinearLayout 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_below="@id/background" 
         android:gravity="center_vertical" 
         android:layout_marginStart="@dimen/activity_margin_16" 
         android:layout_marginEnd="@dimen/activity_margin_16" 
         android:layout_marginTop="-100dp"> 
         <FrameLayout 
          android:layout_width="150dp" 
          android:layout_height="150dp"> 
          <com.mikhaellopez.circularimageview.CircularImageView 
          android:id="@+id/circularProfilePic" 
          android:layout_width="150dp" 
          android:layout_height="150dp" 
          android:src="@drawable/profile" 
          app:civ_border_color="@color/semi_transparent" 
          app:civ_border_width="5dp" /> 

          <ImageButton 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" 
           app:fabSize="mini" 
           android:tint="@color/white" 
           android:backgroundTint="@color/red" 
           android:background="@color/red" 
           android:src="@android:drawable/ic_menu_camera" 
           android:padding="@dimen/activity_margin_5" 
           android:layout_gravity="right" 
           /> 
         </FrameLayout> 

         <LinearLayout 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:layout_gravity="bottom" 
          android:layout_marginBottom="@dimen/activity_margin_16" 
          android:layout_marginStart="12dp" 
          android:orientation="vertical" 
          android:layout_marginLeft="12dp"> 

          <TextView 
           android:id="@+id/userName" 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" 
           android:maxLines="1" 
           android:fontFamily="sans-serif-light" 
           android:layout_marginLeft="@dimen/activity_margin_5" 
           android:text="Anuj Sharma" 
           android:textColor="@color/color_Primary_text" 
           android:textSize="30sp" /> 

          <TextView 
           android:layout_width="wrap_content" 
           android:layout_height="wrap_content" 
           android:layout_marginLeft="@dimen/activity_margin_10" 
           android:fontFamily="sans-serif-light" 
           android:text="musician, singer, songwriter" 
           android:textSize="14sp" /> 
         </LinearLayout> 
        </LinearLayout> 
       </RelativeLayout> 

       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="?attr/actionBarSize" 
        app:layout_collapseMode="pin" 
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"></android.support.v7.widget.Toolbar> 
      </android.support.design.widget.CollapsingToolbarLayout> 
     </android.support.design.widget.AppBarLayout> 


    </android.support.design.widget.CoordinatorLayout> 

बेहतर समझ के लिए this link जाँच चाहिए:

लेआउट तरह होगा।