web-dev-qa-db-fra.com

Android mise en page réactive

Je construis une application (calculatrice). J'utilise la disposition des tableaux avec des boutons à l'intérieur. Il semble parfait sur l'écran du Samsung Galaxy II, mais il semble très mauvais sur les écrans plus grands. La hauteur des boutons est très petite. Comment étirer les boutons sur des écrans plus grands?

La mise en page XML est ci-dessous:

<ScrollView xmlns:Android="http://schemas.an
    xmlns:tools="http://schemas.Android.com/
    Android:layout_width="match_parent"     
    Android:layout_height="match_parent"    
    Android:gravity="right"                 
    Android:paddingBottom="@dimen/activity_v
    Android:paddingLeft="@dimen/activity_hor
    Android:paddingRight="@dimen/activity_ho
    Android:paddingTop="@dimen/activity_vert
    tools:context=".MainActivity" >         


<TableLayout                                
    Android:layout_width="match_parent"     
    Android:layout_height="match_parent"    
    Android:gravity="right"                 
    >                                       



    <TableRow                               
        Android:id="@+id/tableRow1"         
        Android:layout_width="match_parent" 
        Android:layout_height="0dp">        

        <Button                             
            Android:id="@+id/Button01"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.33"    
            Android:layout_height="fill_pare
            Android:text="@string/button_1" 
            Android:visibility="visible" /> 

        <Button                             
            Android:id="@+id/Button02"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.34"    
            Android:layout_height="fill_pare
            Android:text="@string/button_2" 

        <Button                             
            Android:id="@+id/Button03"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.33"    
            Android:layout_height="fill_pare
            Android:text="@string/button_3" 

    </TableRow>                             

    <TableRow                               
        Android:id="@+id/tableRow2"         
        Android:layout_width="match_parent" 
        Android:layout_height="0dp" >       

    <Button                                 
        Android:id="@+id/Button04"          
        Android:layout_width="0dp"          
            Android:layout_weight="0.33"    
        Android:layout_height="fill_parent" 
        Android:text="@string/button_4" />  

    <Button                                 
        Android:id="@+id/Button05"          
        Android:layout_width="0dp"          
        Android:layout_weight="0.34"        
        Android:layout_height="fill_parent" 
        Android:text="@string/button_5" />  

    <Button                                 
        Android:id="@+id/Button06"          
        Android:layout_width="0dp"          
        Android:layout_weight="0.33"        
        Android:layout_height="fill_parent" 
        Android:text="@string/button_6" />  

     </TableRow>                            

    <TableRow                               
        Android:id="@+id/tableRow3"         
        Android:layout_width="match_parent" 
        Android:layout_height="0dp" >       

        <Button                             
            Android:id="@+id/Button07"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.33"    
            Android:layout_height="fill_pare
            Android:text="@string/button_7" 

        <Button                             
            Android:id="@+id/Button08"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.34"    
            Android:layout_height="fill_pare
            Android:text="@string/button_8" 

        <Button                             
            Android:id="@+id/Button09"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.33"    
            Android:layout_height="fill_pare
            Android:text="@string/button_9" 

    </TableRow>                             

    <TableRow                               
        Android:id="@+id/tableRow4"         
        Android:layout_width="match_parent" 
        Android:layout_height="0dp" >       

        <Button                             
            Android:id="@+id/ButtonUndo"    
            Android:layout_width="0dp"      
            Android:layout_weight="0.33"    
            Android:layout_height="fill_pare
            Android:text="@string/button_und

        <Button                             
            Android:id="@+id/Button00"      
            Android:layout_width="0dp"      
            Android:layout_weight="0.34"    
            Android:layout_height="fill_pare
            Android:text="@string/button_0" 

        <Button                             
            Android:id="@+id/ButtonCheck"   
            Android:layout_width="0dp"      
            Android:layout_weight="0.33"    
            Android:layout_height="fill_pare
            Android:text="@string/button_che

    </TableRow>                             

    <TableRow                               
        Android:id="@+id/ResTable"          
        Android:layout_width="match_parent" 
        Android:layout_height="0dp" >       

        <TableLayout                        
            Android:layout_weight="0.3"     
            Android:id="@+id/table_score_cor

            <TableRow                           
                Android:id="@+id/tableRow5_11"  
                Android:layout_width="wrap_conte
                Android:layout_height="fill_pare
                Android:gravity="center_vertical
                    <TextView                     
                    Android:id="@+id/labelCorrec
                    Android:layout_width="wrap_c
                    Android:layout_height="fill_
                    Android:ems="4"             
                    Android:text="@string/correc
                    Android:gravity="center_vertic
                    Android:textSize="15sp" />    
                </TableRow>                   

            <TableRow                           
                Android:id="@+id/tableRow5_12"  
                Android:layout_width="wrap_conte
                Android:layout_height="0dp" >   

                <TextView                     
                    Android:id="@+id/scoreCorr
                    Android:layout_width="0dp"
                    Android:layout_height="fil
                    Android:ems="4"           
                    Android:gravity="center_ve
                    Android:text=""           
                    Android:textSize="30sp"   
                    Android:textStyle="bold" /
            </TableRow>                     
        </TableLayout>                      

        <ImageView                            
            Android:id="@+id/imageView1"      
            Android:layout_width="wrap_content
            Android:layout_height="fill_parent
            Android:layout_weight="0.3"       
            Android:contentDescription="@strin
            Android:fitsSystemWindows="true"  
            Android:scaleType="fitCenter"     
            Android:src="@drawable/trees" />  

        <TableLayout                        
            Android:id="@+id/table_score_inc
            Android:layout_weight="0.3">      

            <TableRow                       
                Android:id="@+id/tableRow5_21"  
                Android:layout_width="wrap_conte
                Android:layout_height="fill_pare
                Android:gravity="center_vertical
                <TextView                     
                    Android:id="@+id/labelIncorrec
                    Android:layout_width="wrap_con
                    Android:layout_height="fill_pa
                    Android:ems="4"             
                    Android:text="@string/incorrec
                    Android:gravity="center_vertic
                    Android:textSize="15sp" />    
            </TableRow>                       
            <TableRow                           
                Android:id="@+id/tableRow5_22"  
                Android:layout_width="wrap_conte
                Android:layout_height="fill_pare

                <TextView                     
                    Android:id="@+id/scoreInco
                    Android:layout_width="0dp"
                    Android:layout_height="fil
                    Android:ems="4"           
                    Android:gravity="center_ve
                    Android:text=""           
                    Android:textSize="30sp"   
                    Android:textStyle="bold" /
            </TableRow>                       
        </TableLayout>                        

        </TableRow>                           

        <TableRow                             
            Android:id="@+id/tableRow_menu"   
            Android:layout_width="wrap_content
            Android:layout_height="fill_parent
            <Button                             
                Android:id="@+id/ButtonPlus"    
                Android:layout_width="0dp"    
                Android:layout_height="38dp"
                Android:layout_weight="0.25"  
                Android:text="@string/action_p
            <Button                             
                Android:id="@+id/ButtonMinus"   
                Android:layout_width="0dp"    
                Android:layout_height="38dp"
                Android:layout_weight="0.25"  
                Android:text="@string/action_m
            <Button                             
                Android:id="@+id/ButtonMult"    
                Android:layout_width="0dp"    
                Android:layout_height="38dp"
                Android:layout_weight="0.25"  
                Android:text="@string/action_m
                        <Button                     
                Android:id="@+id/ButtonDivide"  
                Android:layout_width="0dp"    
                Android:layout_height="38dp"
                Android:layout_weight="0.25"  
                Android:text="@string/action_d
            </TableRow>                         

            </TableLayout>                      

</ScrollView>
androidandroid-layoutandroid-tablelayoutandroid-resolution
14
Jacob

Dans l'ensemble, vous devez créer différentes mises en page/dessins pour prendre en charge tous les écrans. Cela dépend de vos besoins, par exemple, si vous souhaitez inclure 2 boutons sur un petit écran et 4 boutons sur de grands écrans, il est évident que vous devez créer des dispositions différentes.

Si vous souhaitez afficher le même nombre de boutons sur tous les écrans, je vous suggère de préparer différents ensembles d'images/dessins et de les inclure dans votre projet. Ici, vous n'avez rien d'autre à faire que de placer des images dans des dossiers spécialement dessinables.

Encore une chose, si c'est un fond uni, vous pouvez créer une image à 9 patchs afin qu'elle puisse s'étirer avec la taille que vous souhaitez ou que votre appareil prend en charge.

Plus d'étude:

  1. http://developer.Android.com/guide/practices/screens_support.html
  2. Prise en charge de différentes tailles d'écran
  3. Prise en charge de différentes densités
  4. Implémentation de flux d'interface utilisateur adaptatifs
12
Paresh Mayani

Je vous recommande de lire cette documentation http://developer.Android.com/guide/practices/screens_support.html .

ou cet article "Conception pour plusieurs écrans" http://developer.Android.com/training/multiscreen/index.html

4
M D