Friday, September 5, 2014

Make square shaped layout, equal width and height

To make a layout in square shape, with equal width and height, we can re-assign LayoutParams.width and height of our layout in OnGlobalLayoutListener.

like this:
  myGridLayout.getViewTreeObserver().addOnGlobalLayoutListener(
   new OnGlobalLayoutListener(){

   @Override
   public void onGlobalLayout() {
    
    int pLength;
    int pWidth = myGridLayout.getWidth();
    int pHeight = myGridLayout.getHeight();
    
    //Set myGridLayout equal width and height
    if(pWidth>=pHeight){
     pLength = pHeight;
    }else{
     pLength = pWidth;
    }
    ViewGroup.LayoutParams pParams = myGridLayout.getLayoutParams();
    pParams.width = pLength;
    pParams.height = pLength;
    myGridLayout.setLayoutParams(pParams);
    
    //deprecated in API level 16
    myGridLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    //for API Level >= 16
    //myGridLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }});


Update last exercise.

Modify activity_main.xml, to change 8x8 centered GridLayout
<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidtouchview.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <GridLayout
        android:id="@+id/mygrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:columnCount="8"
        android:rowCount="8"
        android:layout_gravity="center"
        android:background="@android:color/background_light" >
    </GridLayout>

</LinearLayout>

Modify MainActivity.java
package com.example.androidtouchview;

import com.example.androidtouchview.MyView.OnToggledListener;

import android.support.v7.app.ActionBarActivity;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.GridLayout;
import android.widget.Toast;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity 
 implements OnToggledListener{
 
 int numberOfGlobalLayoutCalled = 0;
 
 MyView[] myViews;
 
 GridLayout myGridLayout;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  myGridLayout = (GridLayout)findViewById(R.id.mygrid);
  
  int numOfCol = myGridLayout.getColumnCount();
  int numOfRow = myGridLayout.getRowCount();
  myViews = new MyView[numOfCol*numOfRow];
  for(int yPos=0; yPos<numOfRow; yPos++){
   for(int xPos=0; xPos<numOfCol; xPos++){
    MyView tView = new MyView(this, xPos, yPos);
    tView.setOnToggledListener(this);
    myViews[yPos*numOfCol + xPos] = tView;
    myGridLayout.addView(tView);
   }
  }
  
  myGridLayout.getViewTreeObserver().addOnGlobalLayoutListener(
   new OnGlobalLayoutListener(){

   @Override
   public void onGlobalLayout() {
    
    int pLength;
    final int MARGIN = 5;
    
    int pWidth = myGridLayout.getWidth();
    int pHeight = myGridLayout.getHeight();
    int numOfCol = myGridLayout.getColumnCount();
    int numOfRow = myGridLayout.getRowCount();
    
    //Set myGridLayout equal width and height
    if(pWidth>=pHeight){
     pLength = pHeight;
    }else{
     pLength = pWidth;
    }
    ViewGroup.LayoutParams pParams = myGridLayout.getLayoutParams();
    pParams.width = pLength;
    pParams.height = pLength;
    myGridLayout.setLayoutParams(pParams);
    
    int w = pLength/numOfCol; //pWidth/numOfCol;
    int h = pLength/numOfRow; //pHeight/numOfRow;
    
    for(int yPos=0; yPos<numOfRow; yPos++){
     for(int xPos=0; xPos<numOfCol; xPos++){
      GridLayout.LayoutParams params = 
       (GridLayout.LayoutParams)myViews[yPos*numOfCol + xPos].getLayoutParams();
      params.width = w - 2*MARGIN;
      params.height = h - 2*MARGIN;
      params.setMargins(MARGIN, MARGIN, MARGIN, MARGIN);
      myViews[yPos*numOfCol + xPos].setLayoutParams(params);
     }
    }
    
    Toast.makeText(MainActivity.this, 
     "numberOfGlobalLayoutCalled = " + numberOfGlobalLayoutCalled, 
     Toast.LENGTH_SHORT).show();
    numberOfGlobalLayoutCalled++;
    
    //deprecated in API level 16
    myGridLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    //for API Level >= 16
    //myGridLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }});
 }

 @Override
 public void OnToggled(MyView v, boolean touchOn) {

  //get the id string
  String idString = v.getIdX() + ":" + v.getIdY();

  Toast.makeText(MainActivity.this, 
   "Toogled:\n" +
   idString + "\n" +
   touchOn, 
   Toast.LENGTH_SHORT).show();
 }

}

No comments: