Как сделать LinearLayout в несколько колонок

[sanu0074]

Появился вопрос, как сделать LinearLayout в две или несколько колонок, каждый из них содержит как минимум по одной imageview и textview, вставляются в область активити эти layout'ы с помощью layoutinflater, в цикле, в их количество зависит от полученного ответа от сервера. Явный пример того что я имею ввиду, это приложение PlayMarket, вкладка "Набирающие популярность", там в строку расположено по три элемента в котором есть иконка и текстовые view. Ширина этих view зависит от ширины дисплея.
TableLayot не получиться использовать, т.к. количество ячеек в строке будет фиксированное, а пустые ячейки нет смысла создавать, темболее что на одной итерации цикла создается один layout.

Для большего понимания моей идеи, я хочу сделать так с LinearLayout, как в CSS с блоком <DIV> делает свойство float:left;

Как это сделать?

[altwin]

Просто разделить по экрану layout: android:layout_weight, на сколько я помню, там в зависимости от присвоенного значения система автоматом определяет сколько пространства выделить элементу.

А вообще лучше почитать эту тему: How to split Linear Layout in to two columns? А еще можно тут почитать: How to create a fixed/dynamic width column layout?. Думаю суть того, где искать понятна.

[sanu0074]

Вот пример того что я хочу сделать:

[altwin]

Если особо не задумываться то:

[syntax=xml]
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1.0">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight=".30">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight=".30">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight=".30">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:orientation="vertical">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30" android:src="@drawable/ic_launcher"/>
<TextView android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight=".30"
android:text="Test text here"/>

</LinearLayout>
</LinearLayout>
</LinearLayout>
[/syntax]
Это не самый изящный способ, но я никогда не любил размещать что то на экране... по сути вариантов очень много, но этот примитивно прост. Поиграв с атрибутами и стилями можно и с этим делать что угодно. Но я не дизайнер и никогда не интересовался особо UI.

P.S. просто добавьте этот layout в любой проект и увидите на что оно похоже, думаю с сутью что и как там разберетесь. Ну а с созданием custom и compound view это уж точно не ко мне

[sanu0074]

altwin, ваш способ подходит по 3 элемента в строке, но здесь нужно учесть то что каждый элемент появляется по 1шт, а не по три сразу, я же в цикле беру их через inflater, и по три сразу - невыйдет. Такой пример не подходит под то о чем я писал.
Например если рассматривать свойство css - float:left, то там если каждый div подгружать по 1шт ajax'ом - то он будет прилипать к своему соседу слева независимо сколько их там в строке, заполняться будет до того как незакончится место в родительском блоке и перейдет на новую строку...

[altwin]

altwin, ваш способ подходит по 3 элемента в строке, но здесь нужно учесть то что каждый элемент появляется по 1шт, а не по три сразу, я же в цикле беру их через inflater, и по три сразу - невыйдет. Такой пример не подходит под то о чем я писал.
Например если рассматривать свойство css - float:left, то там если каждый div подгружать по 1шт ajax'ом - то он будет прилипать к своему соседу слева независимо сколько их там в строке, заполняться будет до того как незакончится место в родительском блоке и перейдет на новую строку...

С одной стороны вы можете использовать тот же подход, но создавать элементы экрана программно в зависимости от разрешения экрана/баланса силы во вселенной, но это уж слишком хардкор. Да и врятли вы сможете предусмотреть все, разве что у вас есть четко определенный целевой потребитель с конкретными устройствами.
В любом случае вы можете использовать RelativeLayout или делать свой с любыми параметрами отображения. Хотя я бы предпочел обратиться к google и поискать (врятли бесплатный) template UI. Есть много вещей подобных: StaggeredGridView, это не совсем то, что нужно вам, но вы можете изучить реализацию и немного подкорректировать, по сути оно делает что -то похожее, разве что колонку добавить да текст под картинку(детально я не разбирался, т.к. в сложных случаях предпочитаю заложить стоимость подобной работы со стороны в проект).

[sanu0074]

Я вот примерно то что мне нужно нагуглил здесь: http://startandroid.ru/ru/uroki/vse-uro ... ibuty.html
Здесь очень удобно через адаптер создается сетка. Но мне нужно добавлять элементы динамически, т.к. мне надо в цикле брать item"ы для сетки и на каждой итерации их обрабатывать (вешать обработчик событий, на imageView загружать нужную картинку) и потом вставлять в gridview... Как это сделать?
p.s. listview здесь точно не прокатит...

[sanu0074]

Примерно как-то так: http://stackoverflow.com/questions/8021 ... in-android
Но надо сообразить для моего случая, вот мой пример в одну колонку:

Код: Выделить всё

        for(int i=0;i<data.size();i++){
        	View item = ltInflater.inflate(R.layout.main_activity_item, rootMain, false);
        	TextView name = (TextView) item.findViewById(R.id.name);
        	name.setText(data.get(i).get("name").toString());
        	
        	ImageView icon = (ImageView) item.findViewById(R.id.icon); //.....actions
        	rootMain.addView(item);
        
}

где rootMain - это тот LinearLayout - куда вставляются итемы взятые с помощью ltInflater....
то же нужно сделать только для gridView... Немогу сообразить как правильно их туда вставлять? просто вместо LinearLayout сделать gridView задать ей св-ва и делать в цикле тожесамое?

[altwin]

Я вот примерно то что мне нужно нагуглил здесь: http://startandroid.ru/ru/uroki/vse-uro ... ibuty.html
Здесь очень удобно через адаптер создается сетка. Но мне нужно добавлять элементы динамически, т.к. мне надо в цикле брать item"ы для сетки и на каждой итерации их обрабатывать (вешать обработчик событий, на imageView загружать нужную картинку) и потом вставлять в gridview... Как это сделать?
p.s. listview здесь точно не прокатит...

Без принципиального желания использовать ListView, все становится не много проще: Custom Grid View Example with Image and Text

[altwin]

Нашел случайно у себя ссылку на довольно интересную библиотеку

Вроде вы хотели что то вроде этого

Возможно вам подойдет менее навороченный путь - тут (результат - pinterest)

[sanu0074]

altwin, вообще супер) то что надо, спасибо огромное)
теперь бы только разобраться как это подкинуть в свое приложение)

[altwin]

altwin, вообще супер) то что надо, спасибо огромное)
теперь бы только разобраться как это подкинуть в свое приложение)

ну .. в google можно найти примеры работы с ней, в любом случае чтобы использовать библиотеку - придется разбираться... и это не всегда проще, чем написать самому

[sanu0074]

altwin, спасибо)
Я вот для начала решил запилить свой адаптер для gridview, получилось, впринципе это то что надо, хотя не такой кайф как CardsLib. хочу добавить анимацию к картинке imageview в нем и получаю ошибку:

Код: Выделить всё

public class GridViewAdapter extends BaseAdapter {
	 
    private static class ViewHolder {
        TextView name;
        ImageView icon;
    }
 
    private Context context;
    private List<HashMap<String, String>> arrayList;
    private LayoutInflater layoutInflater;
 
 
    GridViewAdapter(Context context, List<HashMap<String, String>> data) {
        this.context = context;
        this.arrayList = data;
        layoutInflater = LayoutInflater.from(context);
    }
 
    @Override
    public int getCount() {
        return arrayList.size();
    }
 
    @Override
    public Object getItem(int position) {
        return arrayList.get(position);
    }
 
    @Override
    public long getItemId(int position) {
        return position;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
 
        if(convertView == null) {
            convertView = layoutInflater.inflate(R.layout.main_activity_item, null);
            viewHolder = new ViewHolder();
            viewHolder.name = (TextView)convertView.findViewById(R.id.name);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder)convertView.getTag();
        }
 
        Animation animation = AnimationUtils.loadAnimation(context, R.anim.rotate); 
		
        
        viewHolder.name.setText(arrayList.get(position).get("name"));
        viewHolder.icon.startAnimation(animation);
        
        return convertView;
    }


}

Лог:

Код: Выделить всё

01-04 11:07:18.849: E/AndroidRuntime(16720): FATAL EXCEPTION: main
01-04 11:07:18.849: E/AndroidRuntime(16720): java.lang.NullPointerException
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at ru.homeandroid.GridViewAdapter.getView(GridViewAdapter.java:67)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.AbsListView.obtainView(AbsListView.java:2627)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.GridView.onMeasure(GridView.java:1045)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1410)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureHorizontal(LinearLayout.java:1052)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:590)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at com.jeremyfeinstein.slidingmenu.lib.CustomViewAbove.onMeasure(CustomViewAbove.java:456)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.RelativeLayout.measureChildHorizontal(RelativeLayout.java:728)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:477)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1410)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1410)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureHorizontal(LinearLayout.java:1052)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:590)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1410)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5245)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2586)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.View.measure(View.java:16831)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:2189)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1352)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1535)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1249)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6364)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:791)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.Choreographer.doCallbacks(Choreographer.java:591)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.Choreographer.doFrame(Choreographer.java:561)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:777)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.os.Handler.handleCallback(Handler.java:730)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.os.Handler.dispatchMessage(Handler.java:92)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.os.Looper.loop(Looper.java:176)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at android.app.ActivityThread.main(ActivityThread.java:5419)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at java.lang.reflect.Method.invokeNative(Native Method)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at java.lang.reflect.Method.invoke(Method.java:525)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1046)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:862)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at de.robv.android.xposed.XposedBridge.main(XposedBridge.java:126)
01-04 11:07:18.849: E/AndroidRuntime(16720): 	at dalvik.system.NativeStart.main(Native Method)

Я в принципе понимаю что ошибка тут: viewHolder.icon.startAnimation(animation); я не получаю сам элемент...
Подскажите, как правильно присвоить анимацию или ресурс для imageView?
Я собираюсь в этом адаптере подгружать картинку в imageview либо из кэша либо из сети... я так делал в более простом примере где адаптер не использовался... а с адаптерами не знаком(

[altwin]

Думаю начать стоит с того, что объект ImageView icon у вас действительно пустой, я не нашел строки кода, в которой вы бы ему присваивали ресурс.(icon = findViewById(...)?) Пример RotateAnimation.

[sanu0074]

разобрался) очередной раз благодарю)