Comment chevaucher trois vues de même taille avec des vues plus petites entre elles?

Question

Je suis en train de faire également espacés trois boutons et alignés verticalement avec des cercles qui se chevauchent entre eux comme ceci:

je suis tombé sur des difficultés parce qu'un LinearLayout était nécessaire pour pondérer également les trois boutons, mais qui se chevauchent Les vues sont plus facilement réalisées dans RelativeLayout et FrameLayout (je dois prendre en charge le SDK < 21, donc je ne peux pas utiliser z-index avec LinearLayout). Lorsque je mets les cercles "OR" dans les cadres/RelativeLayouts, il n'y a pas de moyen facile de les régler à 1/3 de la hauteur de la vue pour qu'ils tombent entre les boutons. Comment diviser un FrameLayout avec les cercles OR en tiers pour placer correctement les cercles?

Answer 1

J'ai fait foll en raison de codage XML et générer de manière similaire mis

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <LinearLayout android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" 
     android:weightSum="3" 
     android:gravity="center" 
     > 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:text="dd" 
      android:background="#CCCCCC" 
      android:gravity="center" 
      android:layout_margin="5dp" 
      android:layout_weight="1"/> 



     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:text="dd" 
      android:layout_margin="5dp" 
      android:background="#CCCCCC" 
      android:gravity="center" 
      android:layout_weight="1"/> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_margin="5dp" 
      android:text="dd" 
      android:background="#CCCCCC" 
      android:gravity="center" 
      android:layout_weight="1"/> 

    </LinearLayout> 

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:weightSum="3" 
     android:gravity="center" 
     android:layout_height="match_parent"> 


     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical"> 
      <TextView 
       android:layout_width="30dp" 
       android:background="#000000" 
       android:text="OR" 
       android:textColor="#FFFFFF" 
       android:gravity="center" 
       android:layout_height="30dp" /> 
     </LinearLayout> 


     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="center" 
      android:orientation="vertical"> 
      <TextView 
       android:layout_width="30dp" 
       android:background="#000000" 
       android:text="OR" 
       android:textColor="#FFFFFF" 
       android:gravity="center" 
       android:layout_height="30dp" /> 
     </LinearLayout> 



    </LinearLayout> 

</FrameLayout> 

Answer 2

Je n'ai pas trouvé de solution simple à cela, alors je réponds à ma propre question! S'il vous plaît laissez-moi savoir si vous avez une meilleure solution.

La solution que je suis venu avec était de mettre les boutons dans un LinearLayout à l'intérieur d'un FrameLayout et de les peser correctement. Les cercles OU sont placés dans le FrameLayout après les boutons, de sorte qu'ils seront dessinés sur le dessus. Cependant, ils ne sont pas positionnés dans le fichier XML.

Dans onCreate() J'ai mesuré la taille du dessin de LinearLayout avec les boutons, puis déplacé les cercles OR d'un tiers plus le rayon du cercle.

Voici le code XML pertinent. Les points clés sont les suivants:

• FrameLayout l'enveloppe, le parent correspondant pour les boutons de zone complète à afficher. Wrapper pour les boutons, parent correspondant.
• LinearLayout
• Button hauteurs tous mis à 0dp et layout_weight="1"

• TextViews pour OU cercles centrés horizontalement, mais pas ajustés verticalement. Notez leur diamètre est 30dp

  <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      android:id="@+id/buttons_container"> 
  
      <Button 
       android:id="@+id/record_topic_option_1" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1" 
       android:onClick="topic1" 
       android:theme="@style/PrimaryButton"/> 
  
      <Button 
       android:id="@+id/record_topic_option_2" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1" 
       android:layout_marginTop="4dp" 
       android:layout_marginBottom="4dp" 
       android:onClick="topic2" 
       android:theme="@style/PrimaryButton" /> 
  
      <Button 
       android:id="@+id/record_topic_option_3" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1" 
       android:onClick="topic3" 
       android:theme="@style/PrimaryButton" /> 
  </LinearLayout> 
  
  <TextView 
      android:id="@+id/top_or" 
      android:layout_width="30dp" 
      android:layout_height="30dp" 
      android:textAlignment="center" 
      android:text="OR" 
      android:layout_gravity="center_horizontal" 
      android:gravity="center" 
      android:textSize="@dimen/material_text_caption" 
      android:textColor="@android:color/white" 
      android:background="@drawable/or_circle_background" 
      /> 
  
  <TextView 
      android:id="@+id/bottom_or" 
      android:layout_width="30dp" 
      android:layout_height="30dp" 
      android:textAlignment="center" 
      android:layout_gravity="center_horizontal" 
      android:gravity="center" 
      android:text="OR" 
      android:textSize="@dimen/material_text_caption" 
      android:textColor="@android:color/white" 
      android:background="@drawable/or_circle_background" /> 
  

Une fois qui est mis en place, l'astuce consiste à ajuster les cercles programme dans onCreate()

final View buttonContainer = findViewById(R.id.buttons_container); 
View topOr = findViewById(R.id.top_or); 
View bottomOr = findViewById(R.id.bottom_or); 

//Get the 15dp radius in pixels at the current screen density. 
final int added_height_for_radius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 
15, getResources().getDisplayMetrics()); 

//Use a ViewTreeObserver to make sure that the view is drawn and you get an accurate measurement of the LinearLayout with buttons 
buttonContainer.getViewTreeObserver().addOnGlobalLayoutListener(
     new ViewTreeObserver.OnGlobalLayoutListener() { 
    @SuppressLint("NewApi") 
    @SuppressWarnings("deprecation") 
    @Override 
    public void onGlobalLayout() { 
     int width = buttonContainer.getWidth(); 
     int height = buttonContainer.getHeight(); 

     //Moving the topOr and bottomOr by setting the top margin to height/3-radius and 2*height/3-radius 
     FrameLayout.LayoutParams params = (FrameLayout.LayoutParams)topOr.getLayoutParams(); 
     params.setMargins(0, (height/3)-added_height_for_radius, 0, 0); 
     topOr.setLayoutParams(params); 

     FrameLayout.LayoutParams params2 = (FrameLayout.LayoutParams)bottomOr.getLayoutParams(); 
     params2.setMargins(0, (2*height/3)-added_height_for_radius, 0, 0); 
     bottomOr.setLayoutParams(params2); 
     buttonContainer.getViewTreeObserver().removeOnGlobalLayoutListener(this); 
    } 
}); 

Merci à Get height and width of a layout programmatically