I'am programming a calendar application which shows the appointments in a week-oriented view.
I implemented the graphics by custom drawing in onDraw() of a View.
The graphics contains fixed parts (time bar) and calendar relative parts (days, appointments).
What is the best way to implement a horizontal scroll through the calendar?
I can't use the ScrollView because I have no fixed maximum width since the user should be able to scroll in the past and in the future "unlimited".
I thought to draw the relative parts in an image which contains 2 days more as the week view requires (one left one right) and draw the bitmap with the calculated offset at the Views Canvas.
As soon the offset exceeds one day I had than to redraw the bitmap.
Does anybody know a more elegant solution?
Regards Andreas
Related
I am working on a custom view where I would like to display a single post from Facebook in a custom View, it would include the name of the person who made the post, the updated time, the message itself or post content and the handle that lets a person expand or collapse the post with a 'Read More' or 'Read Less' depending on how big the post is.
The code for my Custom View looks like this http://pastebin.com/VkxpfLnj , and my animation class looks like this http://pastebin.com/HsEadatY
The problem with the message part is it can be very huge and hence I need an expand or collapse handle. I create a new StaticLayout object everytime the text changes.
I took 3 approaches to animation
based on the difference in the number of pixels, suppose my post was 300 pixels tall before expanding and after expanding was 700 pixels tall, I would simply animate between these two, the problem is that I have to call requestLayout each time and it results in 40 calls per expansion or contraction
The other approach I tried out was to animate based on the number of lines , if there were 4 lines before expansion and 8 lines after expansion,I would simply increment the height of the postview by line height * (final number of lines - initial number of lines )* interpolated time, this approach gave me a just 10 requestLayout() calls but laggy animation.
As per my ViewUtils animation method, my current approach calls requestLayout only at the beginning, the center and end of the animation and results in roughly 12 requestLayout() calls per expand or collapse.
How can I use the static layout or for that matter draw multiple lines on canvas in such a way that I can fade in text when I expand or collapse and at the same time keep the number of requestLayout() calls to a minimum. I would also like to make this Canvas support LTR and RTL if possible. Any suggestions?
I have to design the following layout:, which basically resembles a planner. Here, I have to show schedule for whole week. So far, I had completed the following part .
Now, I am stuck with this part: . I am not getting idea to design this part.
The highlighted portion in the grid indicates an event at that time. My problem is how can I make grids the one illustrated.
I would use 2D graphics and draw it completely in code.
It will be really hard to use xml to achieve this design, You could give it a shot with AbsoluteLayout but it is deprecated.
As about algorithm how to do it, first define a range of hours Your timetable will have,
You don't need full 24h, if all events are in range 8am-8pm for example displaying hours from 8pm to 8am would be a waste of sapce.
Get size of screen and calculate a size of one rectangle for the smallest time-frame.
And later it is simple maths to calculate position and size of rectangle to represent event.
I want to create the following view / set of views which behave following way:
I have huge set of points which have been stored to DB in web server.
My client application downloads those and should draw curved lines about the data.
What components should I use here to get this "infinite" scrolling view to draw content dynamically.
No snapping wanted, so it should be smooth and can stop to every X position.
Should I proceed with this by using HorizontalScrollView with horizontal LinearLayout and remove/add views based on scrolling, then translate the scrolling position and provide fling that the scrolling doesn't stop suddenly.
Or is just one canvas possible to use and draw the content to simulate the scrolling?
Maybe a horizontally scrolling ListView component?
The solution should be efficient and use minimum of memory.
Which solution do you recommend, or do you have some new ideas other than above?
All suggestions are highly appreciated. Thanks.
There is several possibilities:
Create custom View class and implement GestureDetector there. You can get movement of finger, calculate currently visible area and draw only visible part of content.
May be this solution is not the easiest to implement, but it will be fast and does not require any resources.
I've got a GridView which is displaying a calendar. I need to draw some fat lines (about 1/4 of the height of a grid cell) across multiple 'days', and possibly across multiple weeks. I may need to do two or three of these for any given week.
Each line across the cells of a week will need to have some text in it as well.
Since the lines need to cross grid cells I though perhaps I could get a Canvas for the GridView and paint on that. But I can't find a way to do that. Since the lines cross multiple grid cells it doesn't seem useful to draw the line in a particular cell and try to line it up with the previous cell. And I have to do this dynamically, I can't set it in the layout.
I'm open to ideas about how to make this work. Anyone?
If you want to do any additional drawing on top of the GridView content:
Override dispatchDraw(), which hands you a Canvas to draw on.
Call super.dispatchDraw() to draw the normal content first.
Use the Canvas to add anything additional you feel necessary.
HTH
I'm new to Android application development and I'm currently experimenting with various UI ideas. In the image below, you can see a vertically scrolling list of horizontally scrolling galleries (and also textviews as you can see). I'm also doing some matrix and camera transformations which I will come to in a minute.
For the background of the list elements, I use green. Blue is the background of the galleries, and red is the background for the images. These are just for my benefit of learning.
The galleries being used are extended classes where I overrode the drawChild method to perform a canvas scale operation in order for the image closest to the center (width) to be larger than the others.
The list view going vertically, I overrode the drawChild method and used the camera rotations from lack of depth dimension in the canvas functionality. The items in the list are scaled down and rotated relative to their position's proximity to the center (height).
I understood that scrolling and clicking would not necessarily follow along with the image transforms, but it appears as though the parent Gallery class's drawing is constrained to the original coordinates as well (see photo below).
I would love to hear any insight any of you have regarding how I can change the coordinates of the galleries in what is rendered via gallery scroll and the touch responsiveness of said gallery.
Images in the gallery are not same dimensions, so don't let that throw you in looking at the image below
Thanks in advance!
Ben
link to image (could not embed)
-- Update:
I was using my test application UI and noticed that when I got the UI to the point of the linked image and then I touched the top portion of the next row in the list, the gallery updated to display the proper representation. So, I added a call to clearFocus() in the drawChild method and that resulted in more accurate drawing. It does seem a tad slower, and since I'm on the Incredible, I'm worried it is a bloated solution.
In any event, I would still appreciate any thoughts you have regarding the best way to have the views display properly and how to translate the touch events in the gallery's new displayed area to its touchable coordinates so that scrolling on the actual images works when the gallery has moved.
Thanks!
As I updated earlier, the issue of the graphics of the gallery not fully refreshing was resolved by calling clearFocus in drawChild method for the ListView extending class.
The problem with registering the touch events turned out to be where I had used an example for the basis of my experimental program which called a pre-translation on the matrix used for painting. Once I removed that call and adjusted the post-translate call to compensate not having the pre-translate call any longer, I was able to scroll through the galleries regardless of their position, size or rotation (around x axis).