Differences
This shows you the differences between two versions of the page.
|
dapm:laboratoare:05 [2018/03/23 15:20] ioana_maria.culic |
dapm:laboratoare:05 [2021/04/10 21:03] (current) ioana_maria.culic |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 05. ===== | + | ===== Lab 06 - Lists ===== |
| === LISTS === | === LISTS === | ||
| In android, an adapter is a bridge between UI component and data source that helps us to fill data in the UI component. It holds the data and send the data to adapter view then view can takes the data from the adapter view and shows the data on different views like as list view, grid view, spinner etc\\ | In android, an adapter is a bridge between UI component and data source that helps us to fill data in the UI component. It holds the data and send the data to adapter view then view can takes the data from the adapter view and shows the data on different views like as list view, grid view, spinner etc\\ | ||
| + | \\ | ||
| BaseAdapter methods:\\ | BaseAdapter methods:\\ | ||
| - | 1. getCount(): The getCount() function returns the total number of items to be displayed in a list. It counts the value from array list size() method or an array’s length. | + | 1. getCount(): The getCount() function returns the total number of items to be displayed in a list. It counts the value from array list size() method or an array’s length.\\ |
| \\ | \\ | ||
| 2. getView(int i, View view, ViewGroup viewGroup): This function is automatically called when the list item view is ready to be displayed or about to be displayed. In this function we set the layout for list items using LayoutInflater class and then add the data to the views like ImageView, TextView etc\\ | 2. getView(int i, View view, ViewGroup viewGroup): This function is automatically called when the list item view is ready to be displayed or about to be displayed. In this function we set the layout for list items using LayoutInflater class and then add the data to the views like ImageView, TextView etc\\ | ||
| - | 3. getItem(int i): This function is used to Get the data item associated with the specified position in the data set to obtain the corresponding data of the specific location in the collection of data items. | ||
| \\ | \\ | ||
| - | 4. getItemId(int i): As for the getItemId (int position), it returns the corresponding to the position item ID. The function returns a long value of item position to the adapter. | + | 3. getItem(int i): This function is used to Get the data item associated with the specified position in the data set to obtain the corresponding data of the specific location in the collection of data items.\\ |
| \\ | \\ | ||
| - | + | 4. getItemId(int i): As for the getItemId (int position), it returns the corresponding to the position item ID. The function returns a long value of item position to the adapter.\\ | |
| - | + | ||
| - | + | ||
| - | **Ex 0** Make a new project and do not generate a xml file. \\ | + | |
| - | Add the next image into the project\\ | + | |
| - | {{:dapm:laboratoare:lab5_car_icon.png?150|}} | + | |
| - | + | ||
| - | **Ex 1** (If you have generated a xml file in the ex 0, delete it) Add a new xml file named activity_main.xml and make it a LinearLayout with __width match_parent__ and__ height wrap_content__ with the __orientation vertical__. In it, add a **ListView** with __width and height match_parent__ and an id android:id="@+id/lv_list_cars"\\ | + | |
| - | + | ||
| - | **Ex 2** Create another xml file (a LinearLayout ) named list_item.xml. The __orientation__ shoud be __horizontal__ and the __width and the height__ shoud be wrap___content__.\\ | + | |
| - | In the LinearLayout, add an **ImageView**(with id iv_image_element) and a **TextView**(with id tv_name_element), both with width and height wrap_content. | + | |
| - | + | ||
| - | \\ | + | |
| - | **Ex 3** In the MainActivity.java file create another 2 classes (not in class MainActivity): __class Car__ with a String name, and a int imageResource and another __class__ named __TagCar__ with a TextView name and a ImageView image. | + | |
| \\ | \\ | ||
| - | **Ex 4** Create a new java file named CarAdapter which extends BaseAdapter. In it, add an __Activity object named context__, and an __ArrayList of Car named cars.__\\ | ||
| - | Create a constructor which receive an Activity and initializate the context, and the cars arrayList, also add the next function addCar: | ||
| - | |||
| - | Activity context; | ||
| - | ArrayList<Car> cars; | ||
| - | | ||
| - | public CarAdapter (Activity context) { | ||
| - | //TODO | ||
| - | } | ||
| - | | ||
| - | public void addCar(String nameCar, int resource){ | ||
| - | Car car = new Car(); | ||
| - | car.name = nameCar; | ||
| - | car.imageResource = resource; | ||
| - | cars.add(car); | ||
| - | this.notifyDataSetChanged(); | ||
| - | } | ||
| - | | ||
| - | \\ | ||
| - | **Ex 5** **Implement** the 4 methods, and in the getView function add this text: | ||
| - | public View getView(int i, View view, ViewGroup viewGroup) { | ||
| - | View element; | ||
| - | | ||
| - | LayoutInflater layoutInflater = context.getLayoutInflater(); | ||
| - | element = layoutInflater.inflate(R.layout.list_item, null); | ||
| - | TagCar car = new TagCar(); | ||
| - | car.name = element.findViewById(R.id.tv_name_element); | ||
| - | car.image = element.findViewById(R.id.iv_image_element); | ||
| - | element.setTag(car); | ||
| - | | ||
| - | TagCar tag = (TagCar) element.getTag(); | ||
| - | tag.name.setText(cars.get(i).name); | ||
| - | tag.image.setImageResource(cars.get(i).imageResource); | ||
| - | return element; | ||
| - | } | ||
| - | | ||
| - | |||
| - | **Look in Course 4 - List, adapters, recylcing slides 29-31 and tell the teaching assistant if this method is efficient or not (if it's not, make it efficient).** | ||
| - | \\ | ||
| - | |||
| - | |||
| - | **Ex 6** In MainActivity class, in the onCreate function, connect the ListView from the java to the xml (TODO 1)\\ | ||
| - | TODO 2: initializate the object carAdapter(2)\\ | ||
| - | TODO 3: set the carAdapter adapter for list of cars (3).\\ | ||
| - | TODO 4: in the carAdapter, add 4 cars (with addCar function).\\ | ||
| - | |||
| - | public class MainActivity extends Activity { | ||
| - | private ListView listOfCars; | ||
| - | CarAdapter carAdapter; | ||
| - | private EditText addNewCar; | ||
| - | private Button addButton; | ||
| - | | ||
| - | @Override | ||
| - | protected void onCreate(Bundle savedInstanceState) { | ||
| - | super.onCreate(savedInstanceState); | ||
| - | setContentView(R.layout.activity_main); | ||
| - | // TODO 1, 2, 3,4 | ||
| - | } | ||
| - | } | ||
| - | \\ | ||
| - | |||
| - | RUN THE APP | ||
| - | \\ | ||
| - | **Ex 7** In the activity_main.xml, in the linearLayout , add another LinearLayout (width match parent and height wrap_content, orientation horizontal) and add in it an EditText (with id ed_new_car, height wrap_content and width 200dp) and a Button (id b_add_car, width and height wrap_content) | ||
| - | **Ex 8** In MainActivity,in onCreate function, connect the EditText and the Button from the java to the xml file. Set an onClickListener on the button: when clicked, get the Text from the editText and convert it to String, and add a new car in the carAdapter using the name from the editText. After that, set the editText's text to "" | ||
| - | BONUS : http://abhiandroid.com/ui/baseadapter-tutorial-example.html | + | ====== Exercises ====== |
| + | Create a new project and follow the next tutorial http://abhiandroid.com/ui/baseadapter-tutorial-example.html. | ||
