2012-06-08 30 views
1

我正在使用Android Honeycomb中的兩個片段(Tab)。左邊是ListView,右邊是從列表中選擇的項目的預覽。點擊其中一個按鈕時,我想在左側顯示不同的佈局。這怎麼可能?如何在片段內顯示不同的佈局

在此先感謝。

回答

8

你可以做到這一點,我使用這些鏈接做了同樣的事情,這裏是我與你分享的代碼,希望它對你有所幫助......你首先必須創建4佈局。其中2個將用於橫向模式,一個用於縱向模式,另一個用於平板電腦。您必須爲佈局創建多個文件夾,其名稱應該類似於layout-xlargelayout-xlarge-port,這樣您可以爲移動設備和平板電腦創建片段。

MasterFragment活動:

public class MasterFragment extends ListFragment { 
    Boolean isDualPane; 
    int position; 

    @Override 
    public void onActivityCreated(Bundle savedInstanceState) { 
     super.onActivityCreated(savedInstanceState); 
     ArrayList<String> parkNames = new ArrayList<String>(); 
     for (Park park : Resort.PARKS) { 
      parkNames.add(park.getName()); 
     } 

     setListAdapter(new ArrayAdapter<String>(getActivity(), 
       android.R.layout.simple_list_item_1, parkNames)); 
     View detailFrame = getActivity().findViewById(R.id.detail); 
     isDualPane = detailFrame != null && detailFrame.getVisibility() == View.VISIBLE; 

     if (savedInstanceState != null) { 
      position = savedInstanceState.getInt("position", 0); 
     } 

     if (isDualPane) { 
      getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE); 
      showDetail(position); 
     } 
    } 

    @Override 
    public void onSaveInstanceState(Bundle outState) { 
     super.onSaveInstanceState(outState); 
     outState.putInt("position", position); 
    } 

    @Override 
    public void onListItemClick(ListView l, View v, int position, long id) { 
     showDetail(position); 
    } 

    void showDetail(int position) { 
     this.position = position; 
     if (isDualPane) { 
      getListView().setItemChecked(position, true); 
      DetailFragment detailFragment = (DetailFragment) getFragmentManager() 
        .findFragmentById(R.id.detail); 

      if (detailFragment == null || detailFragment.getIndex() != position) { 
       detailFragment = new DetailFragment(position); 
       FragmentTransaction ft = getFragmentManager() 
         .beginTransaction(); 
       ft.replace(R.id.detail, detailFragment); 
       ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 
       ft.commit(); 
      } 
     } else { 
      Intent intent = new Intent(); 
      intent.setClass(getActivity(), DetailActivity.class); 
      intent.putExtra("position", position); 
      startActivity(intent); 
     } 
    } 
}   

次活動 - DetailFragment活動:

public class DetailActivity extends FragmentActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     setContentView(R.layout.detail_act); 
     Bundle bundle = getIntent().getExtras(); 
     int position = bundle.getInt("position"); 
     System.out.println("RR : position is : " + position); 

     Integer[] images = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, 
       R.drawable.pic4, R.drawable.pic5, R.drawable.pic6, 
       R.drawable.pic7, R.drawable.pic8, R.drawable.pic9, 
       R.drawable.pic10, R.drawable.pic11, R.drawable.pic12, 
       R.drawable.pic13 }; 

     final ImageView imgview = (ImageView) findViewById(R.id.imageView1); 
     imgview.setImageResource(images[position]); 

     // DetailFragment detailFragment = new DetailFragment(position); 
     // FragmentManager fm = getSupportFragmentManager(); 
     // FragmentTransaction ft =fm.beginTransaction(); 
     // ft.add(android.R.id.content, detailFragment).commit(); 

    } 
} 

現在,你必須創建第三個活動,MasterGridActivity爲我的圖片,我現在用的顯示在片段GridView

public class MasterGridActivity extends Fragment { 

    Boolean isDualPane; 
    GridView gridView; 
    ListView listView; 
    int position; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
     View view = inflater.inflate(R.layout.gridview, container, false); 

     gridView = (GridView) view.findViewById(R.id.gridViewImage); 
     gridView.setAdapter(new MyAdapter(view.getContext())); 

     return view; 
    } 

    @Override 
    public void onActivityCreated(Bundle savedInstanceState) { 
     View detailFrame = getActivity().findViewById(R.id.detail); 

     isDualPane = detailFrame != null && detailFrame.getVisibility() == View.VISIBLE; 

     gridView.setOnItemClickListener(new OnItemClickListener() { 

      @Override 
      public void onItemClick(AdapterView<?> arg0, View arg1, int pos, long arg3) { 
       if (!isDualPane) { 
        Intent intent = new Intent(); 
        intent.setClass(getActivity(), DetailActivity.class); 
        intent.putExtra("position", pos); 
        startActivity(intent); 
       } else { 
        DetailFragment detailFragment = (DetailFragment) getFragmentManager().findFragmentById(R.id.detail); 

        if (detailFragment == null || detailFragment.getIndex() != pos) { 

         detailFragment = new DetailFragment(pos); 
         FragmentTransaction ft = getFragmentManager().beginTransaction(); 

         ft.replace(R.id.detail, detailFragment); 
         ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE); 
         ft.commit(); 
        } 
       } 
      } 
     }); 

     super.onActivityCreated(savedInstanceState); 
    } 
} 

現在,這裏是我的形象適配器 - MyAdapter - 我的圖像,其延伸的BaseAdapter

public class MyAdapter extends BaseAdapter { 

    private Context mContext; 

    public MyAdapter(Context c) { 
     mContext = c; 
    } 

    @Override 
    public int getCount() { 
     return mThumbIds.length; 
    } 

    @Override 
    public Object getItem(int arg0) { 
     return null; 
    } 

    @Override 
    public long getItemId(int position) { 
     return 0; 
    } 

    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     ImageView imageView; 
     if (convertView == null) { // if it's not recycled, initialize some attributes 
      imageView = new ImageView(mContext); 
      imageView.setLayoutParams(new GridView.LayoutParams(100, 100)); 
      imageView.setImageResource(mThumbIds[position]); 
      imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
      imageView.setPadding(0, 0, 0, 0); 
     } else { 
      imageView = (ImageView) convertView; 
     } 
     imageView.setImageResource(mThumbIds[position]); 
     return imageView; 
    } 

    static Integer[] mThumbIds = { R.drawable.pic1, R.drawable.pic2, 
      R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6, 
      R.drawable.pic7, R.drawable.pic8, R.drawable.pic9, 
      R.drawable.pic10, R.drawable.pic11, R.drawable.pic12, 
      R.drawable.pic13, 
    }; 
} 

現在我正在共享這些片段的XML文件。

main.xml中

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

    <fragment 
     android:id="@+id/master" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     class="org.fragment.MasterGridActivity" /> 

</LinearLayout> 

gridview.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="fill_parent" 
    android:orientation="vertical" > 

    <GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridViewImage" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:numColumns="auto_fit" 
    android:columnWidth="90dp" 
    android:horizontalSpacing="10dp" 
    android:verticalSpacing="10dp" 
    android:gravity="center" 
    android:stretchMode="columnWidth" /> 
</LinearLayout> 

detail_fragment.xml:這個XML是用於示出在另一片段的細節。

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical" > 

     <ImageView 
      android:id="@+id/imageView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:layout_margin="8dp" /> 

     <TextView 
      android:id="@+id/textView" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:padding="8dp" /> 
    </LinearLayout> 
</ScrollView> 

detail_act.xml

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

    <ImageView 
     android:id="@+id/imageView1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:src="@drawable/ic_launcher" /> 
</LinearLayout> 

使景觀模式和平板電腦相同的XML。它對我來說工作得很好。希望它對你有幫助。

+0

對不起,但我無法在程序中找到「DetailFragment」活動。 – Rumit

+0

嗨,請按照我的回答這裏的帖子第二個活動是細節片段activity.you可以按照我的例子,像我發佈你會挑戰性地得到它的全部結果。 –

+0

是的,我找不到「DetailFragment」! – NovusMobile

1

您需要定義event callback to the activity活動回調。也就是說,您的左邊片段必須首先通知容器活動發生了一個事件(即選擇了一個列表項)。然後容器活動會將此信息傳遞給正確的片段,然後相應地更新其UI。

我可以更詳細地解釋這一點,但在互聯網上有幾個tutorials教這個。我建議你仔細閱讀一下them,因爲一旦你做了這個概念,這個概念就會變得更有意義。

+0

可以請你加一些網址 – abi

+0

我的帖子已經有3個鏈接了。 –