タス デザイン グループ

Read Article

ポートレート、ランドスケープの両レイアウトに対応する(リキッドレイアウトの適用)

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.fxos.androidtips02"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="15" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.NoTitleBar" >
        <activity
            android:name="com.example.fxos.androidtips02.MainActivity"
            android:label="@string/app_name"
            android:launchMode="singleTask" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <GridView
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="@dimen/horizontal_spacing"
        android:numColumns="3"
        android:verticalSpacing="@dimen/vertical_spacing" >
    </GridView>

</FrameLayout>

grid_item.xml

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

</ImageView>

layout-land/activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <GridView
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="@dimen/horizontal_spacing"
        android:numColumns="4"
        android:verticalSpacing="@dimen/vertical_spacing" >
    </GridView>

</FrameLayout>

values/dimens.xml

<resources>

    <dimen name="vertical_spacing">30dp</dimen>
    <dimen name="horizontal_spacing">10dp</dimen>

</resources>

values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Liquid Layout</string>

</resources>

MainActivity.java

package com.example.fxos.androidtips02;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

import java.util.ArrayList;

public class MainActivity extends Activity {

    private GridView mGrid;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<Integer> gridList = new ArrayList<Integer>();
        for (int i = 0; i < 50; i++) {
            gridList.add(R.drawable.ic_launcher);
        }

        // set adapter
        BitmapAdapter adapter = new BitmapAdapter(this, R.layout.grid_item, gridList);
        mGrid = (GridView)findViewById(R.id.grid);
        mGrid.setAdapter(adapter);
    }
}

BitmapAdapter.java

package com.example.fxos.androidtips02;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;

public class BitmapAdapter extends ArrayAdapter<Integer> {

    private int resourceId;

    public BitmapAdapter(Context context, int resource, List<Integer> integerArray) {
        super(context, resource, integerArray);
        resourceId = resource;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(
                    Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(resourceId, null);
        }

        ImageView view = (ImageView)convertView;
        view.setImageResource(getItem(position));

        return view;
    }
}

manifest.webapp

{
  "name": "liquid_layout",
  "description": "f02_liquid_layout",
  "launch_path": "/index.html",
  "type": "web",
  "icons": {
    "64": "/img/icon/app-icon64.png",
    "128": "/img/icon/app-icon128.png"
  },
  "developer": {
    "name": "TAS Design Group",
    "url": "http://tasdg.co.jp/"
  },
  "default_locale": "ja"
}

FxOS CSS(shared/style/)

CSS (style/style.css)

@charset "UTF-8";

html {
  height: 100%;
  font-size: 62.5%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.gridsDisplay {
  letter-spacing: -0.4em;
  overflow: hidden;
}

.gridsDisplay .grid {
  margin: 0;
  float: left;
  display: table;
  height: 7rem;
  text-align: center;
  background: #333333;
  color: #ffffff;
  letter-spacing: normal;
  font-size: 2.4rem;
}

@media only screen and (orientation: portrait) {
  .gridsDisplay .grid {
    width: calc(100% / 3);
  }
}

@media only screen and (orientation: landscape) {
  .gridsDisplay .grid {
    width: calc(100% / 4);
  }
}

.gridsDisplay .grid:nth-child(2n) {
  background: #ffffff;
  color: #333333;
}

.gridsDisplay .grid > div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

index.html

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
  <meta charset="utf-8">
  <title>liquid_layout</title>
  <link rel="stylesheet" href="shared/style/headers.css">
  <link rel="stylesheet" href="style/style.css">
  <script src="js/main.js"></script>
</head>
<body>
  <section role="region">
    <header>
      <h1>grid_display</h1>
    </header>
    <article>
      <section class="gridsDisplay">
        <div class="grid"><div>A</div></div>
        <div class="grid"><div>B</div></div>
        <div class="grid"><div>C</div></div>
        <div class="grid"><div>D</div></div>
        <div class="grid"><div>E</div></div>
        <div class="grid"><div>F</div></div>
        <div class="grid"><div>G</div></div>
        <div class="grid"><div>H</div></div>
        <div class="grid"><div>I</div></div>
        <div class="grid"><div>J</div></div>
        <div class="grid"><div>K</div></div>
        <div class="grid"><div>L</div></div>
        <div class="grid"><div>M</div></div>
        <div class="grid"><div>N</div></div>
        <div class="grid"><div>O</div></div>
        <div class="grid"><div>P</div></div>
        <div class="grid"><div>Q</div></div>
        <div class="grid"><div>R</div></div>
        <div class="grid"><div>S</div></div>
        <div class="grid"><div>T</div></div>
        <div class="grid"><div>U</div></div>
        <div class="grid"><div>V</div></div>
        <div class="grid"><div>W</div></div>
        <div class="grid"><div>S</div></div>
        <div class="grid"><div>Y</div></div>
        <div class="grid"><div>Z</div></div>
      </section>
    </article>
  </section>
</body>
</html>

main.js

window.addEventListener('load', function(){

  var elmGrid = document.getElementsByClassName('grid');
  var elmGridWidth = elmGrid[0].clientWidth;
  for (var i = 0; i < elmGrid.length; i++) {
    elmGrid[i].style.height = elmGridWidth + 'px';
  }

});
Return Top