Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Layouts Flexíveis no Android

Layouts Flexíveis no Android

Palestra apresentada no DevCamp 2013 (www.devcamp.com.br).

Douglas Kayama

May 11, 2013
Tweet

More Decks by Douglas Kayama

Other Decks in Programming

Transcript

  1. eee19.com Resoluções e densidades variadas Nome Diagonal Resolução PPI Proporção

    HTC Magic 3.2” 320x480 181 2:3 Nexus One 3.7” 480x800 252 3:5 Motorola RAZR 4.3” 960x540 256 16:9 Galaxy Note 5.3” 800x1280 285 16:10 Kindle Fire 7” 1024x600 169 16:9 Nexus 7 7” 1280x800 216 16:10 Galaxy Note 10.1 10.1” 1280x800 149 16:10
  2. eee19.com Qualificadores • smallestWidth: sw<N>dp (ex: sw600dp)! • Available screen

    width: w<N>dp (ex: w1024dp)! • Available screen height: h<N>dp (ex: h720dp)
  3. eee19.com Fragments <?xml version="1.0" encoding="utf-8"?>! <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"! android:orientation="horizontal"! android:layout_width="match_parent"! android:layout_height="match_parent">!

    <fragment android:name="com.example.news.ArticleListFragment"! android:id="@+id/list"! android:layout_weight="1"! android:layout_width="0dp"! android:layout_height="match_parent" />! <fragment android:name="com.example.news.ArticleReaderFragment"! android:id="@+id/viewer"! android:layout_weight="2"! android:layout_width="0dp"! android:layout_height="match_parent" />! </LinearLayout>
  4. eee19.com Fragments <?xml version="1.0" encoding="utf-8"?>! <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"! android:orientation="horizontal"! android:layout_width="match_parent"! android:layout_height="match_parent">!

    <fragment android:name="com.example.news.ArticleListFragment"! android:id="@+id/main"! android:layout_weight="1"! android:layout_width="0dp"! android:layout_height="match_parent" />! </LinearLayout>
  5. eee19.com layout_weight <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="horizontal" > <View android:layout_height="match_parent"

    android:layout_width="0dp" android:layout_weight="1" android:background="#c90" /> <View android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="2" android:background="#630" /> </LinearLayout>
  6. eee19.com Altura remanescente <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView

    android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
  7. eee19.com Rolagem <ScrollView 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="wrap_content" android:orientation="vertical">

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> </ScrollView>
  8. eee19.com SquareView public class SquareView extends View { // Constructors

    omitted ! public void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int size = Math.min(getMeasuredWidth(), getMeasuredHeight()); setMeasuredDimension(size, size); } }
  9. eee19.com Uma orientação public static boolean isLargeScreen(Activity activity) { DisplayMetrics

    metrics = activity.getResources().getDisplayMetrics(); int longSize = Math.max(metrics.widthPixels, metrics.heightPixels); return (longSize / metrics.density > 960); } public static int getPreferredScreenOrientation(Activity activity) { return isLargeScreen(activity) ? ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE : ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; }
 // In activity public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setRequestedOrientation(Util.getPreferredScreenOrientation(this)); }
  10. eee19.com Caixa de ferramentas para layouts flexíveis • RelativeLayout! •

    Proportional width and height! • Allow scrolling! • Resource folders (orientation, size, density)! • Shape xml! • 9-patch! • Background tiles! • DisplayMetrics! • Custom view